Become an Accessibility Tester - CNIB Access Labs

https://cnib-accesslabs.ca/become-a-tester

Status

Tested

Last Tested

None

Issues Found

142 Errors, 74 Warnings

Score

90%

Full Page Accessibility Score
90.5%

All issues (full page)

Non-Component Issues Score
91.3%

Issues not in common components

Compliance Score
32.5%

76 / 234 tests passed

Issues Found (Non-Component Issues Only)
142
Errors
74
Warnings
1
info
53
Discovery
Filter Test Results
Showing 0 of 0 items |
Errors (142)
Warnings (74)
info (1)
Discovery (53)
High 0
Medium 0
Low 0
Non-Component Issues for This Page Problèmes hors composants pour cette page
Issues not part of common components Problèmes ne faisant pas partie des composants communs
Errors (142)
Accessible Names Noms accessibles

aria-label doesn't match visible text aria-label ne correspond pas au texte visible
About this issue:
What the issue is:

aria-label doesn't match visible text

aria-label ne correspond pas au texte visible

Why this is important:

Voice control users can't activate element

Les utilisateurs de commande vocale ne peuvent pas activer l'élément

Who it affects:

Voice control users

Utilisateurs de commande vocale

How to remediate:
Ensure aria-label includes visible text
Assurez-vous qu'aria-label inclut le texte visible
Relevant test criteria:
WCAG Success Criteria:
  • 2 2
  • . .
  • 5 5
  • . .
  • 3 3

Touchpoint Accessible Names Noms accessibles

Impact Medium Moyen

Location /html[1]/body[1]/footer[1]

Code Snippet
<footer role="contentinfo" aria-label="Footer">
        
                            <div class="footer-area-top entry-container">
                        <div class="container">
Colors Couleurs

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 320px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 320px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 320px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 481px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 481px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 481px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 482px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 482px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 482px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 575px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 575px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 575px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 576px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 576px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 576px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 592px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 592px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 592px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 600px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 600px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 600px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 652px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 652px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 652px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 767px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 767px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 767px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 768px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 768px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 768px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 781px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 781px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 781px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 782px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 782px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 782px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 822px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 822px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 822px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 991px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 991px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 991px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 992px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 992px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 992px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 1024px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 1024px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 1024px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 1080px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 1080px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 1080px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 1199px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 1199px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 1199px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 1200px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 1200px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 1200px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 1290px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 1290px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 1290px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 1340px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 1340px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 1340px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 1341px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 1341px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 1341px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 1389px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 1389px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 1389px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 1399px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 1399px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 1399px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="gspb_heading-id-gsbp-9adcb282-5f25"]/strong[1]/strong[1]

Responsive Breakpoint 1500px width

Code Snippet
<strong>Become an Accessibility Tester</strong>

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[1]

Responsive Breakpoint 1500px width

Code Snippet
<p>At CNIB Access Labs, we believe that sight loss should never hold anyone back from pursuing their dreams or achieving their full potential. We are on a mission to build a diverse and inclusive team

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s) Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)
About this issue:
What the issue is:

Large text fails WCAG AA with contrast ratio of %(ratio)s:1 (foreground: %(fg)s, background: %(bg)s)

Le texte large échoue au WCAG AA avec un ratio de contraste de %(ratio)s:1 (premier plan : %(fg)s, arrière-plan : %(bg)s)

Why this is important:

This large text (%(fontSize)spx) with a contrast ratio of %(ratio)s:1 does not meet WCAG Level AA requirements. Large text (24px+ or 18.66px+ bold) requires a minimum contrast ratio of 3:1 to pass Level AA. The foreground color (%(fg)s) against background (%(bg)s) doesn't provide enough distinction.

Ce texte large (%(fontSize)spx) avec un ratio de contraste de %(ratio)s:1 ne respecte pas les exigences WCAG Niveau AA. Le texte large (24px+ ou 18,66px+ en gras) nécessite un ratio de contraste minimum de 3:1 pour passer le Niveau AA. La couleur de premier plan (%(fg)s) contre l'arrière-plan (%(bg)s) ne fournit pas assez de distinction.

Who it affects:

Users with low vision, color blindness, or age-related vision changes who struggle to distinguish text with insufficient contrast, even when the text is larger

Utilisateurs malvoyants, daltoniens, ou avec des changements de vision liés à l'âge qui ont du mal à distinguer le texte avec un contraste insuffisant, même lorsque le texte est plus grand

How to remediate:
Current contrast is %(ratio)s:1, but WCAG Level AA requires at least 3:1 for large text (%(fontSize)spx). To fix, adjust the foreground color from %(fg)s or the background from %(bg)s. Consider using #949494 or darker on white background for large text.
Le contraste actuel est %(ratio)s:1, mais WCAG Niveau AA exige au moins 3:1 pour le texte large (%(fontSize)spx). Pour corriger, ajuster la couleur de premier plan de %(fg)s ou l'arrière-plan de %(bg)s. Considérer l'utilisation de #949494 ou plus sombre sur un arrière-plan blanc pour le texte large.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Colors Couleurs

Impact High Élevé

Location //*[@id="content"]/div[1]/div[1]/div[1]/div[1]/div[1]/p[2]

Responsive Breakpoint 1500px width

Code Snippet
<p>We’re committed to providing opportunities for individuals with disabilities to build their careers and make an impact across all major industries.</p>
Images Images

Alt text exceeds 150 characters without proper structure, making it difficult for screen reader users to process Le texte alternatif dépasse 150 caractères sans structure appropriée, rendant difficile le traitement pour les utilisateurs de lecteurs d'écran
About this issue:
What the issue is:

Alt text exceeds 150 characters without proper structure, making it difficult for screen reader users to process

Le texte alternatif dépasse 150 caractères sans structure appropriée, rendant difficile le traitement pour les utilisateurs de lecteurs d'écran

Why this is important:

This fails WCAG 5.2.4 Accessibility Supported because even though the page technically meets WCAG success criteria by providing alt text, it does not work properly with assistive technology (screen readers). Screen readers read alt text as a continuous unstructured string without the ability to navigate, skim, or use reading commands that work with properly structured HTML. Long alt text removes screen reader users' ability to use headings navigation, paragraph jumps, list navigation, and other assistive technology features that sighted users take for granted when reading long descriptions. The content may be technically present but is not accessibility-supported because it cannot be effectively used with the user's assistive technology.

Ceci échoue au WCAG 5.2.4 Prise en charge de l'accessibilité car même si la page respecte techniquement les critères de succès WCAG en fournissant un texte alternatif, elle ne fonctionne pas correctement avec les technologies d'assistance (lecteurs d'écran). Les lecteurs d'écran lisent le texte alternatif comme une chaîne continue non structurée sans la possibilité de naviguer, parcourir, ou utiliser les commandes de lecture qui fonctionnent avec du HTML correctement structuré. Un texte alternatif long supprime la capacité des utilisateurs de lecteurs d'écran à utiliser la navigation par titres, les sauts de paragraphe, la navigation par listes, et autres fonctionnalités de technologies d'assistance que les utilisateurs voyants tiennent pour acquises lors de la lecture de descriptions longues. Le contenu peut être techniquement présent mais n'est pas pris en charge par l'accessibilité car il ne peut pas être utilisé efficacement avec la technologie d'assistance de l'utilisateur.

Who it affects:

Screen reader users who must listen to lengthy unstructured descriptions without visual scanning or paragraph breaks, users with cognitive disabilities who struggle with processing long blocks of text without structure, users with attention difficulties who need clear information hierarchy, users with memory challenges who cannot retain long unbroken text passages

Utilisateurs de lecteurs d'écran qui doivent écouter de longues descriptions non structurées sans balayage visuel ou sauts de paragraphe, utilisateurs avec des handicaps cognitifs qui ont des difficultés à traiter de longs blocs de texte sans structure, utilisateurs avec des difficultés d'attention qui ont besoin d'une hiérarchie d'information claire, utilisateurs avec des défis de mémoire qui ne peuvent pas retenir de longs passages de texte ininterrompus

How to remediate:
Limit alt text to 150 characters maximum for concise descriptions. For complex images requiring longer descriptions, use proper structured alternatives: use longdesc attribute or aria-describedby pointing to structured HTML content with headings, paragraphs, lists, and emphasis. Provide detailed descriptions in adjacent visible text content with proper semantic markup. Consider using figure/figcaption for images with captions. Never use alt text as a substitute for properly structured documentation - alt text should be brief, with complex details provided through accessible structured content.
Limiter le texte alternatif à 150 caractères maximum pour des descriptions concises. Pour les images complexes nécessitant des descriptions plus longues, utiliser des alternatives structurées appropriées : utiliser l'attribut longdesc ou aria-describedby pointant vers du contenu HTML structuré avec titres, paragraphes, listes, et emphase. Fournir des descriptions détaillées dans du contenu textuel visible adjacent avec un balisage sémantique approprié. Considérer l'utilisation de figure/figcaption pour les images avec légendes. Ne jamais utiliser le texte alternatif comme substitut à une documentation correctement structurée - le texte alternatif doit être bref, avec des détails complexes fournis par du contenu structuré accessible.
Relevant test criteria:
WCAG Success Criteria:
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Images Images

Impact Medium Moyen

Location /html[1]/body[1]/main[1]/div[1]/div[1]/div[1]/div[1]/div[2]/figure[1]/img[1]

Code Snippet
<img data-recalc-dims="1" decoding="async" width="620" height="414" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2023/08/tester-banner.webp?resize=620%2C414&amp;ssl=1" alt="A young wom
Language Langue

hreflang language code not recognized Code de langue hreflang non reconnu
About this issue:
What the issue is:

hreflang language code not recognized

Code de langue hreflang non reconnu

Why this is important:

Invalid hreflang codes provide incorrect information about linked resources

Les codes hreflang invalides fournissent des informations incorrectes sur les ressources liées

Who it affects:

Screen reader users, search engines

Utilisateurs de lecteurs d'écran, moteurs de recherche

How to remediate:
Use valid ISO 639-1 language codes
Utilisez des codes de langue ISO 639-1 valides
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Language Langue

Impact Low Faible

Location undefined/html[1]/head[1]/link[4]

Code Snippet
<link rel="alternate" hreflang="x-default" href="https://cnib-accesslabs.ca/become-a-tester/">
Links Liens

In-page link (skip link, table of contents link, or fragment identifier) points to a target element that lacks appropriate tabindex, preventing focus management from working properly when the link is activated Le lien interne (lien d'évitement, lien de table des matières, ou identifiant de fragment) pointe vers un élément cible qui manque de tabindex approprié, empêchant la gestion du focus de fonctionner correctement lorsque le lien est activé
About this issue:
What the issue is:

In-page link (skip link, table of contents link, or fragment identifier) points to a target element that lacks appropriate tabindex, preventing focus management from working properly when the link is activated

Le lien interne (lien d'évitement, lien de table des matières, ou identifiant de fragment) pointe vers un élément cible qui manque de tabindex approprié, empêchant la gestion du focus de fonctionner correctement lorsque le lien est activé

Why this is important:

When users activate an in-page link (like a skip link or table of contents link), browsers should move both scroll position and keyboard focus to the target element. However, non-interactive elements (like <div>, <span>, <h2>) are not naturally focusable. Without tabindex="-1" on the target, keyboard focus remains at the link while the page scrolls, creating a disconnect between visual position and keyboard position. This is especially problematic for skip links - a user activates "Skip to main content" expecting to bypass navigation, but their keyboard focus stays in the navigation, forcing them to tab through everything anyway. The skip link becomes useless. Screen reader users expect focus to move with the visual position, and when it doesn't, they become disoriented about their location on the page.

Lorsque les utilisateurs activent un lien interne (comme un lien d'évitement ou un lien de table des matières), les navigateurs devraient déplacer à la fois la position de défilement et le focus clavier vers l'élément cible. Cependant, les éléments non-interactifs (comme <div>, <span>, <h2>) ne sont pas naturellement focalisables. Sans tabindex="-1" sur la cible, le focus clavier reste au niveau du lien pendant que la page défile, créant une déconnexion entre la position visuelle et la position du clavier. Ceci est particulièrement problématique pour les liens d'évitement - un utilisateur active "Aller au contenu principal" en s'attendant à contourner la navigation, mais son focus clavier reste dans la navigation, l'obligeant à parcourir tout de même. Le lien d'évitement devient inutile. Les utilisateurs de lecteurs d'écran s'attendent à ce que le focus se déplace avec la position visuelle, et quand ce n'est pas le cas, ils deviennent désorientés quant à leur emplacement sur la page.

Who it affects:

Keyboard users relying on skip links to bypass repetitive navigation who find the skip link non-functional, screen reader users who expect focus and reading position to move together, users with motor disabilities who use skip links to reduce keystrokes, users navigating table of contents who expect focus to move to the target heading, users with cognitive disabilities who are confused when focus position doesn't match visual position, and developers implementing WCAG 2.4.1 Bypass Blocks

Utilisateurs de clavier qui s'appuient sur les liens d'évitement pour contourner la navigation répétitive et qui trouvent le lien d'évitement non fonctionnel, utilisateurs de lecteurs d'écran qui s'attendent à ce que le focus et la position de lecture se déplacent ensemble, utilisateurs avec des handicaps moteurs qui utilisent les liens d'évitement pour réduire les frappes de touches, utilisateurs naviguant dans une table des matières qui s'attendent à ce que le focus se déplace vers l'en-tête cible, utilisateurs avec des handicaps cognitifs qui sont confus lorsque la position du focus ne correspond pas à la position visuelle, et développeurs implémentant WCAG 2.4.1 Contournement de blocs

How to remediate:
Add tabindex="-1" to the target element of in-page links: <h2 id="main-content" tabindex="-1">Main Content</h2>. The tabindex="-1" makes the element programmatically focusable (can receive focus via JavaScript) without adding it to the tab order (won't be reached by Tab key). When the link is activated, the browser will scroll to the target and move keyboard focus there. Implement this for: skip link targets (skip to main content, skip to navigation), table of contents targets (heading IDs), fragment identifier targets in your navigation. Optional but recommended: add focus styling to the target so users can see it received focus: [tabindex="-1"]:focus { outline: 2px solid #0066cc; }. Test by activating the link and pressing Tab - the next tab should continue from the target location, not return to the link.
Ajoutez tabindex="-1" à l'élément cible des liens internes : <h2 id="main-content" tabindex="-1">Contenu principal</h2>. Le tabindex="-1" rend l'élément focalisable par programmation (peut recevoir le focus via JavaScript) sans l'ajouter à l'ordre de tabulation (ne sera pas atteint par la touche Tab). Lorsque le lien est activé, le navigateur défilera vers la cible et y déplacera le focus clavier. Implémentez ceci pour : les cibles de liens d'évitement (aller au contenu principal, aller à la navigation), les cibles de table des matières (IDs d'en-têtes), les cibles d'identifiants de fragment dans votre navigation. Optionnel mais recommandé : ajoutez un style de focus à la cible pour que les utilisateurs puissent voir qu'elle a reçu le focus : [tabindex="-1"]:focus { outline: 2px solid #0066cc; }. Testez en activant le lien et en appuyant sur Tab - la prochaine tabulation devrait continuer depuis l'emplacement cible, pas retourner au lien.
Relevant test criteria:
WCAG Success Criteria:
  • 2 2
  • . .
  • 4 4
  • . .
  • 1 1
  • , ,
  • 2 2
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Links Liens

Impact High Élevé

Location /html[1]/body[1]/main[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]

Code Snippet
<div id="headline"></div>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //body/a[1]

Code Snippet
<a class="skip-link screen-reader-text" href="#headline">Skip to content</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //body/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[1]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/become-a-tester/" class="wpml-ls-link">
                    <span class="wpml-ls-native">English</span></a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //body/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[2]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/fr/devenez-un-testeur/" class="wpml-ls-link">
                    <span class="wpml-ls-native" lang="fr">Français</span><span class="wpml-ls-display"><span class="w

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //li[@id="menu-item-3805"]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/about-us/">About Us</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //li[@id="menu-item-3806"]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/become-a-tester/" aria-current="page">Become a Tester</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //li[@id="menu-item-6054"]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-cx-2/">Inclusive CX</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //li[@id="menu-item-3809"]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/news/">News</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //li[@id="menu-item-3810"]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/contact-us/">Contact Us</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[1]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Inclusive Built Environment Overview</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[2]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Lived Experience Accessibility Testing</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[3]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Navigation &amp; Wayfinding</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[4]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/accessible-signage/">Accessible Signage</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[5]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/communication-materials/">Communication Materials</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[6]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/workplace-assessment/">Workplace Assessment</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[7]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Research &amp; Planning</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[8]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/be-my-eyes/">Be My Eyes</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[1]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Inclusive Digital Design &amp; Testing Overview</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[2]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/lived-user-accessibility-testing/">Lived Experience Accessibility Testing</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[3]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/digital-services/">Digital Services</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[4]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/digital-design-testing/">Digital Design &amp; Testing</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[3]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/about-us/">About Us</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[4]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/become-a-tester/" aria-current="page">Become a Tester</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[5]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-cx-2/">Inclusive CX</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[6]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/news/">News</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //ul[@id="menu-main-menu-1"]/li[7]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/contact-us/">Contact Us</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //div[@id="gspb_container-id-gsbp-48a69b40-ef5f"]/div[1]/div[1]/a[1]

Code Snippet
<a class="wp-block-button__link has-text-align-left wp-element-button" href="https://cnib-accesslabs.ca/contact-us/">Contact Us</a>

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace
About this issue:
What the issue is:

Link has visual styling that makes it appear to be a button (button-like padding, borders, background colors, rounded corners) but only responds to Enter key, not Space key, violating user expectations that button-styled elements activate with Space

Le lien a un style visuel qui le fait apparaître comme un bouton (espacement, bordures, couleurs d'arrière-plan et coins arrondis de type bouton) mais ne répond qu'à la touche Entrée, pas à la touche Espace, violant les attentes des utilisateurs que les éléments stylisés comme des boutons s'activent avec Espace

Why this is important:

There's a fundamental difference in keyboard interaction between links and buttons: links activate with Enter key, buttons activate with both Enter and Space keys. When you style a link to look like a button, users form the mental model that it IS a button and expect Space key to work. Keyboard users, especially those with motor disabilities who find certain key combinations difficult, may rely on Space key for activation and become frustrated or confused when styled-as-button links don't respond. This creates an inconsistency between visual appearance and behavior - a usability failure. Users may think the element is broken when Space doesn't work. Power users who know the difference between links and buttons are constantly forced to remember which button-looking things are real buttons and which are styled links, adding cognitive load.

Il existe une différence fondamentale dans l'interaction clavier entre les liens et les boutons : les liens s'activent avec la touche Entrée, les boutons s'activent avec les touches Entrée et Espace. Quand vous stylisez un lien pour qu'il ressemble à un bouton, les utilisateurs forment le modèle mental que c'EST un bouton et s'attendent à ce que la touche Espace fonctionne. Les utilisateurs de clavier, en particulier ceux avec des handicaps moteurs qui trouvent certaines combinaisons de touches difficiles, peuvent compter sur la touche Espace pour l'activation et devenir frustrés ou confus quand les liens stylisés comme des boutons ne répondent pas. Cela crée une incohérence entre l'apparence visuelle et le comportement - un échec d'utilisabilité. Les utilisateurs peuvent penser que l'élément est cassé quand Espace ne fonctionne pas. Les utilisateurs expérimentés qui connaissent la différence entre liens et boutons sont constamment forcés de se rappeler quels éléments ressemblant à des boutons sont de vrais boutons et lesquels sont des liens stylisés, ajoutant une charge cognitive.

Who it affects:

Keyboard users who expect Space key activation for button-styled elements, users with motor disabilities who find Space easier than Enter, users with cognitive disabilities confused by inconsistency between appearance and behavior, power users frustrated by having to remember which button-like elements are real buttons versus styled links, users with attention difficulties distracted by unexpected behavior, and developers trying to maintain consistent interaction patterns

Utilisateurs de clavier qui s'attendent à l'activation par la touche Espace pour les éléments stylisés comme des boutons, utilisateurs avec des handicaps moteurs qui trouvent Espace plus facile qu'Entrée, utilisateurs avec des handicaps cognitifs confus par l'incohérence entre apparence et comportement, utilisateurs expérimentés frustrés de devoir se rappeler quels éléments ressemblant à des boutons sont de vrais boutons versus des liens stylisés, utilisateurs avec des difficultés d'attention distraits par un comportement inattendu, et développeurs essayant de maintenir des modèles d'interaction cohérents

How to remediate:
Best solution: use actual <button> elements instead of styled links when you want button appearance and behavior. Change <a href="#" class="btn"> to <button type="button">. If you must use a link styled as a button (for navigation purposes), add JavaScript to handle Space key: link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); The preventDefault() stops Space from scrolling the page, and click() activates the link. However, this is a workaround - semantic HTML is better. Consider: is this actually a button (performs action) or a link (navigates)? Use the correct element. If it navigates to another page or section, use <a>. If it performs an action (submit, open modal, toggle), use <button>. Don't mix semantics and visual styling - they should align.
Meilleure solution : utiliser de vrais éléments <button> au lieu de liens stylisés quand vous voulez l'apparence et le comportement d'un bouton. Changer <a href="#" class="btn"> en <button type="button">. Si vous devez utiliser un lien stylisé comme un bouton (à des fins de navigation), ajoutez du JavaScript pour gérer la touche Espace : link.addEventListener('keydown', (e) => { if (e.key === ' ') { e.preventDefault(); link.click(); } }); Le preventDefault() empêche Espace de faire défiler la page, et click() active le lien. Cependant, c'est une solution de contournement - le HTML sémantique est meilleur. Considérez : est-ce réellement un bouton (effectue une action) ou un lien (navigue) ? Utilisez l'élément correct. S'il navigue vers une autre page ou section, utilisez <a>. S'il effectue une action (soumettre, ouvrir une modale, basculer), utilisez <button>. Ne mélangez pas sémantique et style visuel - ils doivent être alignés.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 4 4
  • , ,
  • 2 2
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Links Liens

Impact Medium Moyen

Location //body/footer[1]/div[1]/div[1]/div[3]/div[1]/div[1]/a[1]

Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/subscribe/">Subscribe</a>

Link containing an image (logo, icon, thumbnail, or img element) has no visible focus indicator when keyboard focused, often due to outline:none or outline:0 removing the default focus styling Lien contenant une image (logo, icône, miniature, ou élément img) n'a pas d'indicateur de focus visible lorsqu'il a le focus clavier, souvent dû à outline:none ou outline:0 supprimant le style de focus par défaut
About this issue:
What the issue is:

Link containing an image (logo, icon, thumbnail, or img element) has no visible focus indicator when keyboard focused, often due to outline:none or outline:0 removing the default focus styling

Lien contenant une image (logo, icône, miniature, ou élément img) n'a pas d'indicateur de focus visible lorsqu'il a le focus clavier, souvent dû à outline:none ou outline:0 supprimant le style de focus par défaut

Why this is important:

Image links are common for logos, social media icons, product thumbnails, gallery images, and icon-based navigation. Without visible focus indicators, keyboard users cannot tell when these image links have focus, making it impossible to know what will activate when pressing Enter. This is particularly problematic for image-heavy interfaces like galleries, product listings, and icon navigation where image links may be the primary or only way to access content. Users may accidentally activate the wrong image link because they couldn't see which one had focus, or may tab past important image links without realizing they were there. The problem is compounded when image links are small (like social media icons) - without clear focus indication, users with low vision or attention difficulties cannot locate the focused element. Image links in navigation are especially critical - if users cannot see focus indicators on logo or menu icons, primary site navigation becomes inaccessible.

Les liens images sont courants pour les logos, icônes de réseaux sociaux, miniatures de produits, images de galerie, et navigation basée sur des icônes. Sans indicateurs de focus visibles, les utilisateurs de clavier ne peuvent pas savoir quand ces liens images ont le focus, rendant impossible de savoir ce qui s'activera en appuyant sur Entrée. Ceci est particulièrement problématique pour les interfaces riches en images comme les galeries, listes de produits, et navigation par icônes où les liens images peuvent être le moyen principal ou unique d'accéder au contenu. Les utilisateurs peuvent accidentellement activer le mauvais lien image parce qu'ils ne pouvaient pas voir lequel avait le focus, ou peuvent passer à côté d'importants liens images sans réaliser qu'ils étaient là. Le problème est aggravé quand les liens images sont petits (comme les icônes de réseaux sociaux) - sans indication claire du focus, les utilisateurs malvoyants ou ayant des difficultés d'attention ne peuvent pas localiser l'élément focalisé. Les liens images dans la navigation sont particulièrement critiques - si les utilisateurs ne peuvent pas voir les indicateurs de focus sur les logos ou icônes de menu, la navigation principale du site devient inaccessible.

Who it affects:

Keyboard users who cannot see which image link has focus, users with low vision who need clear focus indicators to locate interactive images, users with attention or cognitive difficulties who cannot track invisible focus, users of screen magnification who zoom in and need focus indicators to find their position, users with motor disabilities who carefully target specific image links and need confirmation of focus, users navigating icon-heavy interfaces where image links are the primary interaction method, and mobile keyboard users on tablets where image links are common

Utilisateurs de clavier qui ne peuvent pas voir quel lien image a le focus, utilisateurs malvoyants qui ont besoin d'indicateurs de focus clairs pour localiser les images interactives, utilisateurs avec des difficultés d'attention ou cognitives qui ne peuvent pas suivre un focus invisible, utilisateurs d'agrandissement d'écran qui zooment et ont besoin d'indicateurs de focus pour trouver leur position, utilisateurs avec des handicaps moteurs qui ciblent soigneusement des liens images spécifiques et ont besoin d'une confirmation du focus, utilisateurs naviguant dans des interfaces riches en icônes où les liens images sont la méthode d'interaction principale, et utilisateurs de clavier mobile sur tablettes où les liens images sont courants

How to remediate:
Add clear focus indicators to image links. For links containing images, add outline: a:has(img):focus { outline: 3px solid #0066cc; outline-offset: 2px; } or a img:focus { outline: 3px solid #0066cc; } (older browser support). Alternatively, use box-shadow which respects image bounds: a:has(img):focus { box-shadow: 0 0 0 3px #0066cc; }. For rounded or circular images (like avatars or social media icons), box-shadow or drop-shadow filter follows the shape: a:focus img { filter: drop-shadow(0 0 3px #0066cc); }. Ensure focus indicators are thick enough (at least 2-3px) to be visible around images and have sufficient contrast (3:1 minimum) against adjacent backgrounds. For transparent or light images on light backgrounds, consider multi-color indicators: a:has(img):focus { outline: 2px solid #0066cc; box-shadow: 0 0 0 4px rgba(255,255,255,0.8); }. Test by tabbing through your site with keyboard only - every image link should have an immediately obvious focus indicator.
Ajouter des indicateurs de focus clairs aux liens images. Pour les liens contenant des images, ajouter outline : a:has(img):focus { outline: 3px solid #0066cc; outline-offset: 2px; } ou a img:focus { outline: 3px solid #0066cc; } (support navigateurs anciens). Alternativement, utiliser box-shadow qui respecte les limites de l'image : a:has(img):focus { box-shadow: 0 0 0 3px #0066cc; }. Pour les images arrondies ou circulaires (comme les avatars ou icônes de réseaux sociaux), box-shadow ou drop-shadow filter suit la forme : a:focus img { filter: drop-shadow(0 0 3px #0066cc); }. S'assurer que les indicateurs de focus sont suffisamment épais (au moins 2-3px) pour être visibles autour des images et ont un contraste suffisant (3:1 minimum) contre les arrière-plans adjacents. Pour les images transparentes ou claires sur des arrière-plans clairs, considérer des indicateurs multicolores : a:has(img):focus { outline: 2px solid #0066cc; box-shadow: 0 0 0 4px rgba(255,255,255,0.8); }. Tester en naviguant dans votre site uniquement au clavier - chaque lien image devrait avoir un indicateur de focus immédiatement évident.
Relevant test criteria:
WCAG Success Criteria:
  • 2 2
  • . .
  • 4 4
  • . .
  • 7 7
  • , ,
  • 1 1
  • . .
  • 4 4
  • . .
  • 1 1
  • 1 1

Touchpoint Links Liens

Impact High Élevé

Location //body/header[1]/div[1]/div[1]/div[1]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/" class="custom-logo-link" rel="home"><img width="2620" height="1499" src="https://i0.wp.com/cnib-accesslabs.ca/wp-content/uploads/2023/08/23-0008-CNIB_FA_NEW-NAMES

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[1]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/myCNIB/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[2]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://twitter.com/CNIB" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/20

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[3]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/user/cnibnatcomm" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[4]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.instagram.com/cnibfoundation/?hl=en" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmln

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/header[1]/nav[1]/div[2]/div[1]/ul[1]/li[5]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/company/cnib/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http:/

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[1]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/myCNIB/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[2]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://twitter.com/CNIB" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/20

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[3]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/user/cnibnatcomm" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[4]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.instagram.com/cnibfoundation/?hl=en" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmln

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/header[1]/nav[1]/div[4]/div[1]/ul[1]/li[5]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/company/cnib/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http:/

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[1]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.facebook.com/myCNIB/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[2]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://twitter.com/CNIB" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/20

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[3]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.youtube.com/user/cnibnatcomm" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[4]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.instagram.com/cnibfoundation/?hl=en" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmln

Link opens in new window/tab without warning users Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs
About this issue:
What the issue is:

Link opens in new window/tab without warning users

Le lien s'ouvre dans une nouvelle fenêtre/onglet sans avertir les utilisateurs

Why this is important:

Unexpectedly opening new windows can disorient users, especially those using screen readers or magnification. Users may not realize a new window opened and become confused when the back button doesn't work. This is particularly problematic for users with cognitive disabilities or those unfamiliar with browser behaviors.

L'ouverture inattendue de nouvelles fenêtres peut désorienter les utilisateurs, en particulier ceux utilisant des lecteurs d'écran ou un grossissement. Les utilisateurs peuvent ne pas réaliser qu'une nouvelle fenêtre s'est ouverte et être confus lorsque le bouton retour ne fonctionne pas. Ceci est particulièrement problématique pour les utilisateurs avec des handicaps cognitifs ou ceux peu familiers avec les comportements des navigateurs.

Who it affects:

Screen reader users who may not notice the context change, users with cognitive disabilities who may become disoriented, users with motor disabilities who have difficulty managing multiple windows, and novice computer users

Utilisateurs de lecteurs d'écran qui peuvent ne pas remarquer le changement de contexte, utilisateurs avec des handicaps cognitifs qui peuvent être désorientés, utilisateurs avec des handicaps moteurs qui ont des difficultés à gérer plusieurs fenêtres, et utilisateurs novices en informatique

How to remediate:
Add visible text or an icon indicating the link opens in a new window. Include this information in the accessible name (e.g., "Annual report (opens in new window)"). Consider whether opening in a new window is necessary - often it's better to open in the same window and let users control this behavior.
Ajoutez du texte visible ou une icône indiquant que le lien s'ouvre dans une nouvelle fenêtre. Incluez cette information dans le nom accessible (par ex., "Rapport annuel (s'ouvre dans une nouvelle fenêtre)"). Considérez si l'ouverture dans une nouvelle fenêtre est nécessaire - il est souvent préférable d'ouvrir dans la même fenêtre et de laisser les utilisateurs contrôler ce comportement.
Relevant test criteria:
WCAG Success Criteria:
  • 3 3
  • . .
  • 2 2
  • . .
  • 2 2

Touchpoint Links Liens

Impact Medium Moyen

Location //body/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[5]/a[1]

Code Snippet
<a rel="noopener nofollow" target="_blank" href="https://www.linkedin.com/company/cnib/" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http:/
Lists Listes

List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
What the issue is:

List item (<li> or role="listitem") is empty or contains only whitespace

L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces

Why this is important:

Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.

Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.

Who it affects:

Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose

Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif

How to remediate:
Remove empty <li> elements. If the item must exist, add accessible text with aria-label or visually hidden text. Never use empty list items for spacing - use CSS instead.
Supprimez les éléments <li> vides. Si l'élément doit exister, ajoutez du texte accessible avec aria-label ou du texte masqué visuellement. N'utilisez jamais d'éléments de liste vides pour l'espacement - utilisez CSS à la place.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1
  • , ,
  • 4 4
  • . .
  • 1 1
  • . .
  • 2 2

Touchpoint Lists Listes

Impact Medium Moyen

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[1]

Code Snippet
<li><img decoding="async" class="wp-image-4858" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Logo-White.png" alt="CNIB Foundation" srcset="h

List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
What the issue is:

List item (<li> or role="listitem") is empty or contains only whitespace

L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces

Why this is important:

Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.

Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.

Who it affects:

Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose

Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif

How to remediate:
Remove empty <li> elements. If the item must exist, add accessible text with aria-label or visually hidden text. Never use empty list items for spacing - use CSS instead.
Supprimez les éléments <li> vides. Si l'élément doit exister, ajoutez du texte accessible avec aria-label ou du texte masqué visuellement. N'utilisez jamais d'éléments de liste vides pour l'espacement - utilisez CSS à la place.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1
  • , ,
  • 4 4
  • . .
  • 1 1
  • . .
  • 2 2

Touchpoint Lists Listes

Impact Medium Moyen

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[2]

Code Snippet
<li><img decoding="async" class="wp-image-4866" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_EN_withTM.png" alt="Vision Loss Rehabilit

List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
What the issue is:

List item (<li> or role="listitem") is empty or contains only whitespace

L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces

Why this is important:

Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.

Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.

Who it affects:

Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose

Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif

How to remediate:
Remove empty <li> elements. If the item must exist, add accessible text with aria-label or visually hidden text. Never use empty list items for spacing - use CSS instead.
Supprimez les éléments <li> vides. Si l'élément doit exister, ajoutez du texte accessible avec aria-label ou du texte masqué visuellement. N'utilisez jamais d'éléments de liste vides pour l'espacement - utilisez CSS à la place.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1
  • , ,
  • 4 4
  • . .
  • 1 1
  • . .
  • 2 2

Touchpoint Lists Listes

Impact Medium Moyen

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[3]

Code Snippet
<li><img decoding="async" class="wp-image-4860" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_ENG.png" alt="Deafblind Community Ser

List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
What the issue is:

List item (<li> or role="listitem") is empty or contains only whitespace

L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces

Why this is important:

Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.

Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.

Who it affects:

Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose

Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif

How to remediate:
Remove empty <li> elements. If the item must exist, add accessible text with aria-label or visually hidden text. Never use empty list items for spacing - use CSS instead.
Supprimez les éléments <li> vides. Si l'élément doit exister, ajoutez du texte accessible avec aria-label ou du texte masqué visuellement. N'utilisez jamais d'éléments de liste vides pour l'espacement - utilisez CSS à la place.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1
  • , ,
  • 4 4
  • . .
  • 1 1
  • . .
  • 2 2

Touchpoint Lists Listes

Impact Medium Moyen

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[4]

Code Snippet
<li><img decoding="async" class="wp-image-4854" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_ENG.png" alt="

List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
What the issue is:

List item (<li> or role="listitem") is empty or contains only whitespace

L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces

Why this is important:

Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.

Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.

Who it affects:

Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose

Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif

How to remediate:
Remove empty <li> elements. If the item must exist, add accessible text with aria-label or visually hidden text. Never use empty list items for spacing - use CSS instead.
Supprimez les éléments <li> vides. Si l'élément doit exister, ajoutez du texte accessible avec aria-label ou du texte masqué visuellement. N'utilisez jamais d'éléments de liste vides pour l'espacement - utilisez CSS à la place.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1
  • , ,
  • 4 4
  • . .
  • 1 1
  • . .
  • 2 2

Touchpoint Lists Listes

Impact Medium Moyen

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[1]

Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4858" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_ONLY_Wht_FRE_.png" alt="INCA"></li>

List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
What the issue is:

List item (<li> or role="listitem") is empty or contains only whitespace

L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces

Why this is important:

Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.

Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.

Who it affects:

Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose

Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif

How to remediate:
Remove empty <li> elements. If the item must exist, add accessible text with aria-label or visually hidden text. Never use empty list items for spacing - use CSS instead.
Supprimez les éléments <li> vides. Si l'élément doit exister, ajoutez du texte accessible avec aria-label ou du texte masqué visuellement. N'utilisez jamais d'éléments de liste vides pour l'espacement - utilisez CSS à la place.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1
  • , ,
  • 4 4
  • . .
  • 1 1
  • . .
  • 2 2

Touchpoint Lists Listes

Impact Medium Moyen

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[2]

Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4866" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_FR_withMC.png" alt="Readaptation En Defic

List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
What the issue is:

List item (<li> or role="listitem") is empty or contains only whitespace

L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces

Why this is important:

Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.

Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.

Who it affects:

Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose

Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif

How to remediate:
Remove empty <li> elements. If the item must exist, add accessible text with aria-label or visually hidden text. Never use empty list items for spacing - use CSS instead.
Supprimez les éléments <li> vides. Si l'élément doit exister, ajoutez du texte accessible avec aria-label ou du texte masqué visuellement. N'utilisez jamais d'éléments de liste vides pour l'espacement - utilisez CSS à la place.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1
  • , ,
  • 4 4
  • . .
  • 1 1
  • . .
  • 2 2

Touchpoint Lists Listes

Impact Medium Moyen

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[3]

Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4860" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_FR.png" alt="Services Communautaires

List item (<li> or role="listitem") is empty or contains only whitespace L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces
About this issue:
What the issue is:

List item (<li> or role="listitem") is empty or contains only whitespace

L'élément de liste (<li> ou role="listitem") est vide ou ne contient que des espaces

Why this is important:

Empty list items create confusion for screen reader users who hear "bullet" or "list item" announced but receive no content. Users don't know if content failed to load or if the empty item is intentional.

Les éléments de liste vides créent de la confusion pour les utilisateurs de lecteurs d'écran qui entendent "puce" ou "élément de liste" annoncé mais ne reçoivent aucun contenu. Les utilisateurs ne savent pas si le contenu a échoué à se charger ou si l'élément vide est intentionnel.

Who it affects:

Screen reader users who hear meaningless list item announcements, keyboard users who may encounter empty items, users with cognitive disabilities confused by structural elements with no purpose

Utilisateurs de lecteurs d'écran qui entendent des annonces d'éléments de liste dénuées de sens, utilisateurs de clavier qui peuvent rencontrer des éléments vides, utilisateurs avec des handicaps cognitifs confus par des éléments structurels sans objectif

How to remediate:
Remove empty <li> elements. If the item must exist, add accessible text with aria-label or visually hidden text. Never use empty list items for spacing - use CSS instead.
Supprimez les éléments <li> vides. Si l'élément doit exister, ajoutez du texte accessible avec aria-label ou du texte masqué visuellement. N'utilisez jamais d'éléments de liste vides pour l'espacement - utilisez CSS à la place.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1
  • , ,
  • 4 4
  • . .
  • 1 1
  • . .
  • 2 2

Touchpoint Lists Listes

Impact Medium Moyen

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[4]

Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4854" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_FRE.png" alt="
Styles Styles

Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
What the issue is:

Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation

Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle

Why this is important:

When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.

Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.

Who it affects:

Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes

Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées

How to remediate:
Move all color and font declarations from inline style attributes to external CSS files or <style> blocks with lower specificity, use CSS classes instead of inline styles (replace style="color: red; font-size: 18px;" with class="error-text"), ensure user stylesheets can override your styles by avoiding !important declarations, test that users can apply custom stylesheets successfully, and reserve inline styles only for layout properties like positioning or dimensions when absolutely necessary
Déplacer toutes les déclarations de couleur et de police des attributs de style en ligne vers des fichiers CSS externes ou des blocs <style> avec une spécificité plus faible, utiliser des classes CSS au lieu de styles en ligne (remplacer style="color: red; font-size: 18px;" par class="error-text"), s'assurer que les feuilles de style utilisateur peuvent remplacer vos styles en évitant les déclarations !important, tester que les utilisateurs peuvent appliquer des feuilles de style personnalisées avec succès, et réserver les styles en ligne uniquement pour les propriétés de mise en page comme le positionnement ou les dimensions lorsque c'est absolument nécessaire
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Styles Styles

Impact High Élevé

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[1]

Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-facebook has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollo...

Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
What the issue is:

Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation

Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle

Why this is important:

When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.

Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.

Who it affects:

Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes

Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées

How to remediate:
Move all color and font declarations from inline style attributes to external CSS files or <style> blocks with lower specificity, use CSS classes instead of inline styles (replace style="color: red; font-size: 18px;" with class="error-text"), ensure user stylesheets can override your styles by avoiding !important declarations, test that users can apply custom stylesheets successfully, and reserve inline styles only for layout properties like positioning or dimensions when absolutely necessary
Déplacer toutes les déclarations de couleur et de police des attributs de style en ligne vers des fichiers CSS externes ou des blocs <style> avec une spécificité plus faible, utiliser des classes CSS au lieu de styles en ligne (remplacer style="color: red; font-size: 18px;" par class="error-text"), s'assurer que les feuilles de style utilisateur peuvent remplacer vos styles en évitant les déclarations !important, tester que les utilisateurs peuvent appliquer des feuilles de style personnalisées avec succès, et réserver les styles en ligne uniquement pour les propriétés de mise en page comme le positionnement ou les dimensions lorsque c'est absolument nécessaire
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Styles Styles

Impact High Élevé

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[2]

Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-twitter has-secondary-color has-background-background-color twitter-icon wp-block-social-link"><a rel="noop...

Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
What the issue is:

Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation

Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle

Why this is important:

When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.

Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.

Who it affects:

Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes

Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées

How to remediate:
Move all color and font declarations from inline style attributes to external CSS files or <style> blocks with lower specificity, use CSS classes instead of inline styles (replace style="color: red; font-size: 18px;" with class="error-text"), ensure user stylesheets can override your styles by avoiding !important declarations, test that users can apply custom stylesheets successfully, and reserve inline styles only for layout properties like positioning or dimensions when absolutely necessary
Déplacer toutes les déclarations de couleur et de police des attributs de style en ligne vers des fichiers CSS externes ou des blocs <style> avec une spécificité plus faible, utiliser des classes CSS au lieu de styles en ligne (remplacer style="color: red; font-size: 18px;" par class="error-text"), s'assurer que les feuilles de style utilisateur peuvent remplacer vos styles en évitant les déclarations !important, tester que les utilisateurs peuvent appliquer des feuilles de style personnalisées avec succès, et réserver les styles en ligne uniquement pour les propriétés de mise en page comme le positionnement ou les dimensions lorsque c'est absolument nécessaire
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Styles Styles

Impact High Élevé

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[3]

Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-youtube has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollow...

Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
What the issue is:

Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation

Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle

Why this is important:

When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.

Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.

Who it affects:

Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes

Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées

How to remediate:
Move all color and font declarations from inline style attributes to external CSS files or <style> blocks with lower specificity, use CSS classes instead of inline styles (replace style="color: red; font-size: 18px;" with class="error-text"), ensure user stylesheets can override your styles by avoiding !important declarations, test that users can apply custom stylesheets successfully, and reserve inline styles only for layout properties like positioning or dimensions when absolutely necessary
Déplacer toutes les déclarations de couleur et de police des attributs de style en ligne vers des fichiers CSS externes ou des blocs <style> avec une spécificité plus faible, utiliser des classes CSS au lieu de styles en ligne (remplacer style="color: red; font-size: 18px;" par class="error-text"), s'assurer que les feuilles de style utilisateur peuvent remplacer vos styles en évitant les déclarations !important, tester que les utilisateurs peuvent appliquer des feuilles de style personnalisées avec succès, et réserver les styles en ligne uniquement pour les propriétés de mise en page comme le positionnement ou les dimensions lorsque c'est absolument nécessaire
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Styles Styles

Impact High Élevé

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[4]

Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-instagram has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofoll...

Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle
About this issue:
What the issue is:

Inline style attributes define color or font properties directly on HTML elements, overriding user stylesheets and preventing users from customizing visual presentation

Les attributs de style en ligne définissent des propriétés de couleur ou de police directement sur les éléments HTML, remplaçant les feuilles de style utilisateur et empêchant les utilisateurs de personnaliser la présentation visuelle

Why this is important:

When colors and fonts are hard-coded in inline style attributes, CSS specificity rules make them extremely difficult for users to override with their own stylesheets. Users with low vision who need specific color schemes (high contrast, inverted colors, custom color combinations), users with dyslexia who need particular fonts, and users who need custom text spacing cannot apply their accessibility preferences. Inline styles essentially lock visual presentation, forcing all users to view content exactly as designed regardless of their needs.

Quand les couleurs et polices sont codées en dur dans les attributs de style en ligne, les règles de spécificité CSS les rendent extrêmement difficiles à remplacer par les utilisateurs avec leurs propres feuilles de style. Les utilisateurs malvoyants qui ont besoin de schémas de couleurs spécifiques (contraste élevé, couleurs inversées, combinaisons de couleurs personnalisées), les utilisateurs avec dyslexie qui ont besoin de polices particulières, et les utilisateurs qui ont besoin d'espacement de texte personnalisé ne peuvent pas appliquer leurs préférences d'accessibilité. Les styles en ligne verrouillent essentiellement la présentation visuelle, forçant tous les utilisateurs à voir le contenu exactement comme conçu indépendamment de leurs besoins.

Who it affects:

Users with low vision who require custom color schemes or high contrast settings, users with dyslexia or reading disabilities who need specific fonts like OpenDyslexic or Comic Sans, users with light sensitivity who need dark mode or specific color combinations, users with cognitive disabilities who need customized text presentation, elderly users who need larger text with specific spacing, and users with color blindness who need adjusted color palettes

Utilisateurs malvoyants qui nécessitent des schémas de couleurs personnalisés ou des paramètres de contraste élevé, utilisateurs avec dyslexie ou troubles de lecture qui ont besoin de polices spécifiques comme OpenDyslexic ou Comic Sans, utilisateurs avec sensibilité à la lumière qui nécessitent un mode sombre ou des combinaisons de couleurs spécifiques, utilisateurs avec handicaps cognitifs qui ont besoin d'une présentation de texte personnalisée, utilisateurs âgés qui nécessitent un texte plus grand avec un espacement spécifique, et utilisateurs daltoniens qui ont besoin de palettes de couleurs ajustées

How to remediate:
Move all color and font declarations from inline style attributes to external CSS files or <style> blocks with lower specificity, use CSS classes instead of inline styles (replace style="color: red; font-size: 18px;" with class="error-text"), ensure user stylesheets can override your styles by avoiding !important declarations, test that users can apply custom stylesheets successfully, and reserve inline styles only for layout properties like positioning or dimensions when absolutely necessary
Déplacer toutes les déclarations de couleur et de police des attributs de style en ligne vers des fichiers CSS externes ou des blocs <style> avec une spécificité plus faible, utiliser des classes CSS au lieu de styles en ligne (remplacer style="color: red; font-size: 18px;" par class="error-text"), s'assurer que les feuilles de style utilisateur peuvent remplacer vos styles en évitant les déclarations !important, tester que les utilisateurs peuvent appliquer des feuilles de style personnalisées avec succès, et réserver les styles en ligne uniquement pour les propriétés de mise en page comme le positionnement ou les dimensions lorsque c'est absolument nécessaire
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Styles Styles

Impact High Élevé

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[5]

Code Snippet
<li style="color: #000000; background-color: #ffffff; " class="wp-social-link wp-social-link-linkedin has-secondary-color has-background-background-color wp-block-social-link"><a rel="noopener nofollo...

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
What the issue is:

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order

Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources

Why this is important:

Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.

Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.

Who it affects:

Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles

Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés

How to remediate:
Move all color and font definitions from <style> tags to external CSS files that load early in the document head, use external stylesheets with link elements instead of embedded styles (replace <style> with <link rel="stylesheet" href="styles.css">), ensure external stylesheets are loaded before any embedded styles if you must use both, avoid using overly specific selectors or !important that make user overrides difficult, test that user stylesheets successfully override your color and font choices, and reserve <style> tags for critical layout CSS only when external files would cause flash of unstyled content
Déplacer toutes les définitions de couleur et de police des balises <style> vers des fichiers CSS externes qui se chargent tôt dans l'en-tête du document, utiliser des feuilles de style externes avec des éléments link au lieu de styles intégrés (remplacer <style> par <link rel="stylesheet" href="styles.css">), s'assurer que les feuilles de style externes sont chargées avant tout style intégré si vous devez utiliser les deux, éviter d'utiliser des sélecteurs trop spécifiques ou !important qui rendent difficiles les remplacements utilisateur, tester que les feuilles de style utilisateur remplacent avec succès vos choix de couleur et de police, et réserver les balises <style> uniquement pour le CSS de mise en page critique lorsque les fichiers externes causeraient un flash de contenu non stylé
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Styles Styles

Impact High Élevé

Location /html[1]/head[1]/style[4]

Code Snippet
<style>

	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
</style>

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
What the issue is:

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order

Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources

Why this is important:

Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.

Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.

Who it affects:

Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles

Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés

How to remediate:
Move all color and font definitions from <style> tags to external CSS files that load early in the document head, use external stylesheets with link elements instead of embedded styles (replace <style> with <link rel="stylesheet" href="styles.css">), ensure external stylesheets are loaded before any embedded styles if you must use both, avoid using overly specific selectors or !important that make user overrides difficult, test that user stylesheets successfully override your color and font choices, and reserve <style> tags for critical layout CSS only when external files would cause flash of unstyled content
Déplacer toutes les définitions de couleur et de police des balises <style> vers des fichiers CSS externes qui se chargent tôt dans l'en-tête du document, utiliser des feuilles de style externes avec des éléments link au lieu de styles intégrés (remplacer <style> par <link rel="stylesheet" href="styles.css">), s'assurer que les feuilles de style externes sont chargées avant tout style intégré si vous devez utiliser les deux, éviter d'utiliser des sélecteurs trop spécifiques ou !important qui rendent difficiles les remplacements utilisateur, tester que les feuilles de style utilisateur remplacent avec succès vos choix de couleur et de police, et réserver les balises <style> uniquement pour le CSS de mise en page critique lorsque les fichiers externes causeraient un flash de contenu non stylé
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Styles Styles

Impact High Élevé

Location /html[1]/head[1]/style[5]

Code Snippet
<style>
/*! This file is auto-generated */
.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
</style>

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
What the issue is:

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order

Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources

Why this is important:

Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.

Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.

Who it affects:

Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles

Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés

How to remediate:
Move all color and font definitions from <style> tags to external CSS files that load early in the document head, use external stylesheets with link elements instead of embedded styles (replace <style> with <link rel="stylesheet" href="styles.css">), ensure external stylesheets are loaded before any embedded styles if you must use both, avoid using overly specific selectors or !important that make user overrides difficult, test that user stylesheets successfully override your color and font choices, and reserve <style> tags for critical layout CSS only when external files would cause flash of unstyled content
Déplacer toutes les définitions de couleur et de police des balises <style> vers des fichiers CSS externes qui se chargent tôt dans l'en-tête du document, utiliser des feuilles de style externes avec des éléments link au lieu de styles intégrés (remplacer <style> par <link rel="stylesheet" href="styles.css">), s'assurer que les feuilles de style externes sont chargées avant tout style intégré si vous devez utiliser les deux, éviter d'utiliser des sélecteurs trop spécifiques ou !important qui rendent difficiles les remplacements utilisateur, tester que les feuilles de style utilisateur remplacent avec succès vos choix de couleur et de police, et réserver les balises <style> uniquement pour le CSS de mise en page critique lorsque les fichiers externes causeraient un flash de contenu non stylé
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Styles Styles

Impact High Élevé

Location /html[1]/head[1]/style[6]

Code Snippet
<style>
.jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-shar...</style>

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
What the issue is:

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order

Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources

Why this is important:

Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.

Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.

Who it affects:

Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles

Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés

How to remediate:
Move all color and font definitions from <style> tags to external CSS files that load early in the document head, use external stylesheets with link elements instead of embedded styles (replace <style> with <link rel="stylesheet" href="styles.css">), ensure external stylesheets are loaded before any embedded styles if you must use both, avoid using overly specific selectors or !important that make user overrides difficult, test that user stylesheets successfully override your color and font choices, and reserve <style> tags for critical layout CSS only when external files would cause flash of unstyled content
Déplacer toutes les définitions de couleur et de police des balises <style> vers des fichiers CSS externes qui se chargent tôt dans l'en-tête du document, utiliser des feuilles de style externes avec des éléments link au lieu de styles intégrés (remplacer <style> par <link rel="stylesheet" href="styles.css">), s'assurer que les feuilles de style externes sont chargées avant tout style intégré si vous devez utiliser les deux, éviter d'utiliser des sélecteurs trop spécifiques ou !important qui rendent difficiles les remplacements utilisateur, tester que les feuilles de style utilisateur remplacent avec succès vos choix de couleur et de police, et réserver les balises <style> uniquement pour le CSS de mise en page critique lorsque les fichiers externes causeraient un flash de contenu non stylé
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Styles Styles

Impact High Élevé

Location /html[1]/head[1]/style[8]

Code Snippet
<style>
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #...</style>

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
What the issue is:

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order

Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources

Why this is important:

Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.

Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.

Who it affects:

Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles

Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés

How to remediate:
Move all color and font definitions from <style> tags to external CSS files that load early in the document head, use external stylesheets with link elements instead of embedded styles (replace <style> with <link rel="stylesheet" href="styles.css">), ensure external stylesheets are loaded before any embedded styles if you must use both, avoid using overly specific selectors or !important that make user overrides difficult, test that user stylesheets successfully override your color and font choices, and reserve <style> tags for critical layout CSS only when external files would cause flash of unstyled content
Déplacer toutes les définitions de couleur et de police des balises <style> vers des fichiers CSS externes qui se chargent tôt dans l'en-tête du document, utiliser des feuilles de style externes avec des éléments link au lieu de styles intégrés (remplacer <style> par <link rel="stylesheet" href="styles.css">), s'assurer que les feuilles de style externes sont chargées avant tout style intégré si vous devez utiliser les deux, éviter d'utiliser des sélecteurs trop spécifiques ou !important qui rendent difficiles les remplacements utilisateur, tester que les feuilles de style utilisateur remplacent avec succès vos choix de couleur et de police, et réserver les balises <style> uniquement pour le CSS de mise en page critique lorsque les fichiers externes causeraient un flash de contenu non stylé
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Styles Styles

Impact High Élevé

Location /html[1]/head[1]/style[9]

Code Snippet
<style>
#gspb_heading-id-gsbp-7455257e-60db{padding-bottom:15px}#gspb_image-id-gsbp-e2230365-a55d{text-align:left;height:595px}#gspb_image-id-gsbp-e2230365-a55d img{object-fit:cover;vertical-align:top;display:inline-block;box-sizing:border-box;max-width:100%;box-shadow:30px 30px 0 0 #fff200;width:595px}@me...</style>

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
What the issue is:

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order

Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources

Why this is important:

Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.

Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.

Who it affects:

Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles

Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés

How to remediate:
Move all color and font definitions from <style> tags to external CSS files that load early in the document head, use external stylesheets with link elements instead of embedded styles (replace <style> with <link rel="stylesheet" href="styles.css">), ensure external stylesheets are loaded before any embedded styles if you must use both, avoid using overly specific selectors or !important that make user overrides difficult, test that user stylesheets successfully override your color and font choices, and reserve <style> tags for critical layout CSS only when external files would cause flash of unstyled content
Déplacer toutes les définitions de couleur et de police des balises <style> vers des fichiers CSS externes qui se chargent tôt dans l'en-tête du document, utiliser des feuilles de style externes avec des éléments link au lieu de styles intégrés (remplacer <style> par <link rel="stylesheet" href="styles.css">), s'assurer que les feuilles de style externes sont chargées avant tout style intégré si vous devez utiliser les deux, éviter d'utiliser des sélecteurs trop spécifiques ou !important qui rendent difficiles les remplacements utilisateur, tester que les feuilles de style utilisateur remplacent avec succès vos choix de couleur et de police, et réserver les balises <style> uniquement pour le CSS de mise en page critique lorsque les fichiers externes causeraient un flash de contenu non stylé
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Styles Styles

Impact High Élevé

Location /html[1]/head[1]/style[12]

Code Snippet
<style>/* Workplace accomodations */

.workplaceaccomodation-h1 h1 {
	font-size: 50px;
}

/* Blog */

.blog-thumb-inner {
	background-size: contain;
}

/* Hide elements
 * */

.woocommerce-cart-form__contents .product-thumbnail, .wpml-ls-current-language, .wpml-ls-display { 
	display: none !important;
}

/...</style>

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources
About this issue:
What the issue is:

Style tags in HTML document define color or font properties, making it harder for users to override with custom stylesheets due to specificity and source order

Les balises de style dans le document HTML définissent des propriétés de couleur ou de police, rendant plus difficile pour les utilisateurs de les remplacer avec des feuilles de style personnalisées en raison de la spécificité et de l'ordre des sources

Why this is important:

Embedded <style> tags create specificity and cascade issues that can prevent users from successfully applying their own stylesheets for accessibility needs. Colors and fonts defined in <style> tags appear later in the cascade than external stylesheets, often requiring users to add !important to every custom rule or fight complex specificity battles. This creates significant barriers for users who depend on custom styling - those with low vision needing high contrast, users with dyslexia needing specific fonts, or users with light sensitivity needing dark themes. External CSS files load first and are easier to override with user stylesheets.

Les balises <style> intégrées créent des problèmes de spécificité et de cascade qui peuvent empêcher les utilisateurs d'appliquer avec succès leurs propres feuilles de style pour les besoins d'accessibilité. Les couleurs et polices définies dans les balises <style> apparaissent plus tard dans la cascade que les feuilles de style externes, obligeant souvent les utilisateurs à ajouter !important à chaque règle personnalisée ou à lutter contre des batailles de spécificité complexes. Cela crée des barrières importantes pour les utilisateurs qui dépendent du style personnalisé - ceux malvoyants nécessitant un contraste élevé, les utilisateurs avec dyslexie nécessitant des polices spécifiques, ou les utilisateurs avec sensibilité à la lumière nécessitant des thèmes sombres. Les fichiers CSS externes se chargent en premier et sont plus faciles à remplacer avec les feuilles de style utilisateur.

Who it affects:

Users with low vision who need custom color schemes that may be overridden by embedded styles, users with dyslexia or reading disabilities who cannot reliably apply their preferred fonts, users with photosensitivity who need consistent dark mode implementations, users with cognitive disabilities requiring specific visual customizations, and users relying on browser extensions or assistive technology that inject custom CSS which may be defeated by embedded styles

Utilisateurs malvoyants qui ont besoin de schémas de couleurs personnalisés qui peuvent être remplacés par des styles intégrés, utilisateurs avec dyslexie ou troubles de lecture qui ne peuvent pas appliquer de manière fiable leurs polices préférées, utilisateurs avec photosensibilité qui ont besoin d'implémentations cohérentes du mode sombre, utilisateurs avec handicaps cognitifs nécessitant des personnalisations visuelles spécifiques, et utilisateurs s'appuyant sur des extensions de navigateur ou des technologies d'assistance qui injectent du CSS personnalisé qui peut être contré par des styles intégrés

How to remediate:
Move all color and font definitions from <style> tags to external CSS files that load early in the document head, use external stylesheets with link elements instead of embedded styles (replace <style> with <link rel="stylesheet" href="styles.css">), ensure external stylesheets are loaded before any embedded styles if you must use both, avoid using overly specific selectors or !important that make user overrides difficult, test that user stylesheets successfully override your color and font choices, and reserve <style> tags for critical layout CSS only when external files would cause flash of unstyled content
Déplacer toutes les définitions de couleur et de police des balises <style> vers des fichiers CSS externes qui se chargent tôt dans l'en-tête du document, utiliser des feuilles de style externes avec des éléments link au lieu de styles intégrés (remplacer <style> par <link rel="stylesheet" href="styles.css">), s'assurer que les feuilles de style externes sont chargées avant tout style intégré si vous devez utiliser les deux, éviter d'utiliser des sélecteurs trop spécifiques ou !important qui rendent difficiles les remplacements utilisateur, tester que les feuilles de style utilisateur remplacent avec succès vos choix de couleur et de police, et réserver les balises <style> uniquement pour le CSS de mise en page critique lorsque les fichiers externes causeraient un flash de contenu non stylé
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Styles Styles

Impact High Élevé

Location /html[1]/body[1]/style[1]

Code Snippet
<style>
:root :where(.wp-block-button.is-style-outline--1 .wp-block-button__link){background: transparent none;border-color: currentColor;border-width: 2px;border-style: solid;color: currentColor;padding-top: 0.667em;padding-right: 1.33em;padding-bottom: 0.667em;padding-left: 1.33em;}
:root :where(.wp-bloc...</style>
Warnings (74)
Colors Couleurs

Site doesn't support prefers-color-scheme media query to adapt to user's operating system color scheme preferences Le site ne prend pas en charge la requête média prefers-color-scheme pour s'adapter aux préférences de schéma de couleurs du système d'exploitation de l'utilisateur
About this issue:
What the issue is:

Site doesn't support prefers-color-scheme media query to adapt to user's operating system color scheme preferences

Le site ne prend pas en charge la requête média prefers-color-scheme pour s'adapter aux préférences de schéma de couleurs du système d'exploitation de l'utilisateur

Why this is important:

Many users with light sensitivity, photophobia, or visual impairments require dark mode to comfortably use digital interfaces. Users who have configured their operating system to use dark mode expect websites to honor that preference. Without dark mode support, these users experience eye strain, headaches, and difficulty reading content. Similarly, users in bright environments may prefer light mode for better readability. By not supporting color scheme preferences, the site fails to provide an accessibility-supported experience for users who require these accommodations.

De nombreux utilisateurs souffrant de sensibilité à la lumière, de photophobie ou de déficiences visuelles nécessitent le mode sombre pour utiliser confortablement les interfaces numériques. Les utilisateurs qui ont configuré leur système d'exploitation pour utiliser le mode sombre s'attendent à ce que les sites web respectent cette préférence. Sans prise en charge du mode sombre, ces utilisateurs subissent une fatigue oculaire, des maux de tête et des difficultés à lire le contenu. De même, les utilisateurs dans des environnements lumineux peuvent préférer le mode clair pour une meilleure lisibilité. En ne prenant pas en charge les préférences de schéma de couleurs, le site ne parvient pas à fournir une expérience accessible pour les utilisateurs qui nécessitent ces adaptations.

Who it affects:

Users with light sensitivity or photophobia who require dark mode, users with migraines triggered by bright screens, users with visual impairments who find dark backgrounds easier to read, users working in low-light environments, users who have configured OS-level dark mode for accessibility reasons, users with astigmatism who experience less blur with dark backgrounds, elderly users who prefer high contrast dark themes

Utilisateurs souffrant de sensibilité à la lumière ou de photophobie qui nécessitent le mode sombre, utilisateurs souffrant de migraines déclenchées par des écrans lumineux, utilisateurs malvoyants qui trouvent les arrière-plans sombres plus faciles à lire, utilisateurs travaillant dans des environnements peu éclairés, utilisateurs qui ont configuré le mode sombre au niveau du système d'exploitation pour des raisons d'accessibilité, utilisateurs souffrant d'astigmatisme qui subissent moins de flou avec des arrière-plans sombres, utilisateurs âgés qui préfèrent les thèmes sombres à contraste élevé

How to remediate:
Implement CSS prefers-color-scheme media query to detect and support user's OS color preference. Add @media (prefers-color-scheme: dark) { } rules with appropriate color adjustments for dark mode. Ensure sufficient contrast ratios are maintained in both light and dark themes (4.5:1 for normal text, 3:1 for large text). Test with actual OS dark mode enabled across different browsers and devices. Consider using CSS custom properties (variables) to make theme switching more maintainable. Example: @media (prefers-color-scheme: dark) { body { background: #1a1a1a; color: #e0e0e0; } }
Implémenter la requête média CSS prefers-color-scheme pour détecter et prendre en charge la préférence de couleur du système d'exploitation de l'utilisateur. Ajouter des règles @media (prefers-color-scheme: dark) { } avec des ajustements de couleur appropriés pour le mode sombre. Assurer que des ratios de contraste suffisants sont maintenus dans les thèmes clair et sombre (4,5:1 pour le texte normal, 3:1 pour le texte large). Tester avec le mode sombre du système d'exploitation activé sur différents navigateurs et appareils. Considérer l'utilisation de propriétés personnalisées CSS (variables) pour rendre le changement de thème plus maintenable. Exemple : @media (prefers-color-scheme: dark) { body { background: #1a1a1a; color: #e0e0e0; } }
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Colors Couleurs

Impact Medium Moyen

Location /html

Code Snippet
<page>

Site doesn't support prefers-contrast media query to adapt to user's operating system high contrast mode preferences Le site ne prend pas en charge la requête média prefers-contrast pour s'adapter aux préférences de mode contraste élevé du système d'exploitation de l'utilisateur
About this issue:
What the issue is:

Site doesn't support prefers-contrast media query to adapt to user's operating system high contrast mode preferences

Le site ne prend pas en charge la requête média prefers-contrast pour s'adapter aux préférences de mode contraste élevé du système d'exploitation de l'utilisateur

Why this is important:

Many users with low vision, color vision deficiencies, or visual impairments require high contrast mode to read digital content. Users who have configured their operating system to use high contrast mode (or request increased contrast) expect websites to honor that preference. High contrast mode significantly increases the contrast ratio between text and backgrounds, making content more readable for users with reduced visual acuity. Without high contrast support, these users experience difficulty reading text, distinguishing interface elements, and navigating the site. By not supporting contrast preferences, the site fails to provide an accessibility-supported experience for users who require these accommodations.

De nombreux utilisateurs malvoyants, souffrant de déficiences de la vision des couleurs ou de déficiences visuelles nécessitent le mode contraste élevé pour lire le contenu numérique. Les utilisateurs qui ont configuré leur système d'exploitation pour utiliser le mode contraste élevé (ou demander un contraste accru) s'attendent à ce que les sites web respectent cette préférence. Le mode contraste élevé augmente significativement le ratio de contraste entre le texte et les arrière-plans, rendant le contenu plus lisible pour les utilisateurs avec une acuité visuelle réduite. Sans prise en charge du contraste élevé, ces utilisateurs éprouvent des difficultés à lire le texte, distinguer les éléments d'interface et naviguer sur le site. En ne prenant pas en charge les préférences de contraste, le site ne parvient pas à fournir une expérience accessible pour les utilisateurs qui nécessitent ces adaptations.

Who it affects:

Users with low vision who require high contrast to read text, users with color vision deficiencies (color blindness) who need stronger contrast, users with cataracts or other vision conditions that reduce contrast sensitivity, elderly users with age-related vision decline, users with light sensitivity who need higher contrast in certain lighting conditions, users working in bright sunlight who need increased contrast, users with astigmatism who benefit from higher contrast ratios, users who have configured OS-level high contrast mode for accessibility reasons

Utilisateurs malvoyants qui nécessitent un contraste élevé pour lire le texte, utilisateurs souffrant de déficiences de la vision des couleurs (daltonisme) qui ont besoin d'un contraste plus fort, utilisateurs souffrant de cataractes ou d'autres conditions visuelles qui réduisent la sensibilité au contraste, utilisateurs âgés avec un déclin visuel lié à l'âge, utilisateurs souffrant de sensibilité à la lumière qui ont besoin d'un contraste plus élevé dans certaines conditions d'éclairage, utilisateurs travaillant en plein soleil qui ont besoin d'un contraste accru, utilisateurs souffrant d'astigmatisme qui bénéficient de ratios de contraste plus élevés, utilisateurs qui ont configuré le mode contraste élevé au niveau du système d'exploitation pour des raisons d'accessibilité

How to remediate:
Implement CSS prefers-contrast media query to detect and support user's OS contrast preference. Add @media (prefers-contrast: more) { } rules with increased contrast ratios for high contrast mode. Ensure significantly higher contrast ratios in high contrast mode (ideally 7:1 or higher for normal text). Test with actual OS high contrast mode enabled across different browsers and operating systems (Windows High Contrast Mode, macOS Increase Contrast). Consider using CSS custom properties (variables) to make contrast adjustments more maintainable. Example: @media (prefers-contrast: more) { body { background: #000; color: #fff; } a { color: #0ff; text-decoration: underline; } }. Ensure all UI elements including borders, buttons, and form controls have sufficient contrast in high contrast mode.
Implémenter la requête média CSS prefers-contrast pour détecter et prendre en charge la préférence de contraste du système d'exploitation de l'utilisateur. Ajouter des règles @media (prefers-contrast: more) { } avec des ratios de contraste accrus pour le mode contraste élevé. Assurer des ratios de contraste significativement plus élevés en mode contraste élevé (idéalement 7:1 ou plus pour le texte normal). Tester avec le mode contraste élevé du système d'exploitation activé sur différents navigateurs et systèmes d'exploitation (Mode Contraste Élevé Windows, Augmenter le Contraste macOS). Considérer l'utilisation de propriétés personnalisées CSS (variables) pour rendre les ajustements de contraste plus maintenables. Exemple : @media (prefers-contrast: more) { body { background: #000; color: #fff; } a { color: #0ff; text-decoration: underline; } }. Assurer que tous les éléments d'interface incluant les bordures, boutons et contrôles de formulaire ont un contraste suffisant en mode contraste élevé.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 3 3
  • , ,
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Colors Couleurs

Impact Medium Moyen

Location /html

Code Snippet
<page>
Fonts Polices

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
What the issue is:

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines.

La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.

Why this is important:

Tight line spacing makes text difficult to read and track, especially for blocks of text. Adequate line spacing (1.5x or higher) helps users with dyslexia distinguish lines, improves reading comprehension, and reduces eye strain. This fails WCAG 5.2.4 Accessibility Supported because insufficient line height forces users to rely on assistive technologies (custom stylesheets, browser extensions, or reader modes) when they otherwise wouldn't need them. The content should be accessibility-supported by default, not require users to apply technical workarounds to make it readable.

Un espacement de ligne serré rend le texte difficile à lire et à suivre, particulièrement pour les blocs de texte. Un espacement de ligne adéquat (1,5x ou plus) aide les utilisateurs dyslexiques à distinguer les lignes, améliore la compréhension de lecture et réduit la fatigue oculaire. Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car une hauteur de ligne insuffisante force les utilisateurs à recourir aux technologies d'assistance (feuilles de style personnalisées, extensions de navigateur ou modes de lecture) alors qu'ils n'en auraient pas besoin autrement. Le contenu devrait être accessible par défaut, sans obliger les utilisateurs à appliquer des solutions techniques pour le rendre lisible.

Who it affects:

Users with dyslexia who need clear line separation, users with low vision who track lines of text, older users, users with reading disabilities, users who experience eye strain.

Utilisateurs dyslexiques qui ont besoin d'une séparation claire des lignes, utilisateurs malvoyants qui suivent les lignes de texte, utilisateurs âgés, utilisateurs avec des troubles de la lecture, utilisateurs qui éprouvent de la fatigue oculaire.

How to remediate:
Set line-height to at least 1.5 for blocks of text with multiple lines. For this element with font size %(fontSize)spx, the line height should be at least %(minLineHeight)spx (currently %(lineHeight)spx). Note: While WCAG 1.4.12 requires that user-applied spacing adjustments don't break the layout, providing adequate default line height (5.2.4 Accessibility Supported) prevents users from needing assistive technologies in the first place. Single lines or headings may use tighter spacing.
Définir la hauteur de ligne à au moins 1,5 pour les blocs de texte avec plusieurs lignes. Pour cet élément avec une taille de police de %(fontSize)spx, la hauteur de ligne devrait être d'au moins %(minLineHeight)spx (actuellement %(lineHeight)spx). Note : Bien que WCAG 1.4.12 exige que les ajustements d'espacement appliqués par l'utilisateur ne cassent pas la mise en page, fournir une hauteur de ligne par défaut adéquate (5.2.4 Prise en charge de l'accessibilité) évite aux utilisateurs d'avoir besoin de technologies d'assistance en premier lieu. Les lignes uniques ou les titres peuvent utiliser un espacement plus serré.
Relevant test criteria:
WCAG Success Criteria:
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Fonts Polices

Impact Medium Moyen

Location /html[1]/body[1]/main[1]/div[1]/div[1]/div[1]/div[1]/div[1]/h1[1]/strong[1]/strong[1]

Code Snippet
<strong>Become an Accessibility Tester</strong>

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
What the issue is:

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines.

La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.

Why this is important:

Tight line spacing makes text difficult to read and track, especially for blocks of text. Adequate line spacing (1.5x or higher) helps users with dyslexia distinguish lines, improves reading comprehension, and reduces eye strain. This fails WCAG 5.2.4 Accessibility Supported because insufficient line height forces users to rely on assistive technologies (custom stylesheets, browser extensions, or reader modes) when they otherwise wouldn't need them. The content should be accessibility-supported by default, not require users to apply technical workarounds to make it readable.

Un espacement de ligne serré rend le texte difficile à lire et à suivre, particulièrement pour les blocs de texte. Un espacement de ligne adéquat (1,5x ou plus) aide les utilisateurs dyslexiques à distinguer les lignes, améliore la compréhension de lecture et réduit la fatigue oculaire. Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car une hauteur de ligne insuffisante force les utilisateurs à recourir aux technologies d'assistance (feuilles de style personnalisées, extensions de navigateur ou modes de lecture) alors qu'ils n'en auraient pas besoin autrement. Le contenu devrait être accessible par défaut, sans obliger les utilisateurs à appliquer des solutions techniques pour le rendre lisible.

Who it affects:

Users with dyslexia who need clear line separation, users with low vision who track lines of text, older users, users with reading disabilities, users who experience eye strain.

Utilisateurs dyslexiques qui ont besoin d'une séparation claire des lignes, utilisateurs malvoyants qui suivent les lignes de texte, utilisateurs âgés, utilisateurs avec des troubles de la lecture, utilisateurs qui éprouvent de la fatigue oculaire.

How to remediate:
Set line-height to at least 1.5 for blocks of text with multiple lines. For this element with font size %(fontSize)spx, the line height should be at least %(minLineHeight)spx (currently %(lineHeight)spx). Note: While WCAG 1.4.12 requires that user-applied spacing adjustments don't break the layout, providing adequate default line height (5.2.4 Accessibility Supported) prevents users from needing assistive technologies in the first place. Single lines or headings may use tighter spacing.
Définir la hauteur de ligne à au moins 1,5 pour les blocs de texte avec plusieurs lignes. Pour cet élément avec une taille de police de %(fontSize)spx, la hauteur de ligne devrait être d'au moins %(minLineHeight)spx (actuellement %(lineHeight)spx). Note : Bien que WCAG 1.4.12 exige que les ajustements d'espacement appliqués par l'utilisateur ne cassent pas la mise en page, fournir une hauteur de ligne par défaut adéquate (5.2.4 Prise en charge de l'accessibilité) évite aux utilisateurs d'avoir besoin de technologies d'assistance en premier lieu. Les lignes uniques ou les titres peuvent utiliser un espacement plus serré.
Relevant test criteria:
WCAG Success Criteria:
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Fonts Polices

Impact Medium Moyen

Location /html[1]/body[1]/main[1]/div[1]/div[2]/div[1]/div[1]/div[1]/h2[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]

Code Snippet
<strong>Co-design products with the end user in mind</strong>

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
What the issue is:

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines.

La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.

Why this is important:

Tight line spacing makes text difficult to read and track, especially for blocks of text. Adequate line spacing (1.5x or higher) helps users with dyslexia distinguish lines, improves reading comprehension, and reduces eye strain. This fails WCAG 5.2.4 Accessibility Supported because insufficient line height forces users to rely on assistive technologies (custom stylesheets, browser extensions, or reader modes) when they otherwise wouldn't need them. The content should be accessibility-supported by default, not require users to apply technical workarounds to make it readable.

Un espacement de ligne serré rend le texte difficile à lire et à suivre, particulièrement pour les blocs de texte. Un espacement de ligne adéquat (1,5x ou plus) aide les utilisateurs dyslexiques à distinguer les lignes, améliore la compréhension de lecture et réduit la fatigue oculaire. Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car une hauteur de ligne insuffisante force les utilisateurs à recourir aux technologies d'assistance (feuilles de style personnalisées, extensions de navigateur ou modes de lecture) alors qu'ils n'en auraient pas besoin autrement. Le contenu devrait être accessible par défaut, sans obliger les utilisateurs à appliquer des solutions techniques pour le rendre lisible.

Who it affects:

Users with dyslexia who need clear line separation, users with low vision who track lines of text, older users, users with reading disabilities, users who experience eye strain.

Utilisateurs dyslexiques qui ont besoin d'une séparation claire des lignes, utilisateurs malvoyants qui suivent les lignes de texte, utilisateurs âgés, utilisateurs avec des troubles de la lecture, utilisateurs qui éprouvent de la fatigue oculaire.

How to remediate:
Set line-height to at least 1.5 for blocks of text with multiple lines. For this element with font size %(fontSize)spx, the line height should be at least %(minLineHeight)spx (currently %(lineHeight)spx). Note: While WCAG 1.4.12 requires that user-applied spacing adjustments don't break the layout, providing adequate default line height (5.2.4 Accessibility Supported) prevents users from needing assistive technologies in the first place. Single lines or headings may use tighter spacing.
Définir la hauteur de ligne à au moins 1,5 pour les blocs de texte avec plusieurs lignes. Pour cet élément avec une taille de police de %(fontSize)spx, la hauteur de ligne devrait être d'au moins %(minLineHeight)spx (actuellement %(lineHeight)spx). Note : Bien que WCAG 1.4.12 exige que les ajustements d'espacement appliqués par l'utilisateur ne cassent pas la mise en page, fournir une hauteur de ligne par défaut adéquate (5.2.4 Prise en charge de l'accessibilité) évite aux utilisateurs d'avoir besoin de technologies d'assistance en premier lieu. Les lignes uniques ou les titres peuvent utiliser un espacement plus serré.
Relevant test criteria:
WCAG Success Criteria:
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Fonts Polices

Impact Medium Moyen

Location /html[1]/body[1]/main[1]/div[1]/div[2]/div[2]/div[1]/div[2]/h2[1]/strong[1]/strong[1]/strong[1]/strong[1]/strong[1]

Code Snippet
<strong>Make a major impact for accessibility</strong>

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
What the issue is:

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines.

La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.

Why this is important:

Tight line spacing makes text difficult to read and track, especially for blocks of text. Adequate line spacing (1.5x or higher) helps users with dyslexia distinguish lines, improves reading comprehension, and reduces eye strain. This fails WCAG 5.2.4 Accessibility Supported because insufficient line height forces users to rely on assistive technologies (custom stylesheets, browser extensions, or reader modes) when they otherwise wouldn't need them. The content should be accessibility-supported by default, not require users to apply technical workarounds to make it readable.

Un espacement de ligne serré rend le texte difficile à lire et à suivre, particulièrement pour les blocs de texte. Un espacement de ligne adéquat (1,5x ou plus) aide les utilisateurs dyslexiques à distinguer les lignes, améliore la compréhension de lecture et réduit la fatigue oculaire. Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car une hauteur de ligne insuffisante force les utilisateurs à recourir aux technologies d'assistance (feuilles de style personnalisées, extensions de navigateur ou modes de lecture) alors qu'ils n'en auraient pas besoin autrement. Le contenu devrait être accessible par défaut, sans obliger les utilisateurs à appliquer des solutions techniques pour le rendre lisible.

Who it affects:

Users with dyslexia who need clear line separation, users with low vision who track lines of text, older users, users with reading disabilities, users who experience eye strain.

Utilisateurs dyslexiques qui ont besoin d'une séparation claire des lignes, utilisateurs malvoyants qui suivent les lignes de texte, utilisateurs âgés, utilisateurs avec des troubles de la lecture, utilisateurs qui éprouvent de la fatigue oculaire.

How to remediate:
Set line-height to at least 1.5 for blocks of text with multiple lines. For this element with font size %(fontSize)spx, the line height should be at least %(minLineHeight)spx (currently %(lineHeight)spx). Note: While WCAG 1.4.12 requires that user-applied spacing adjustments don't break the layout, providing adequate default line height (5.2.4 Accessibility Supported) prevents users from needing assistive technologies in the first place. Single lines or headings may use tighter spacing.
Définir la hauteur de ligne à au moins 1,5 pour les blocs de texte avec plusieurs lignes. Pour cet élément avec une taille de police de %(fontSize)spx, la hauteur de ligne devrait être d'au moins %(minLineHeight)spx (actuellement %(lineHeight)spx). Note : Bien que WCAG 1.4.12 exige que les ajustements d'espacement appliqués par l'utilisateur ne cassent pas la mise en page, fournir une hauteur de ligne par défaut adéquate (5.2.4 Prise en charge de l'accessibilité) évite aux utilisateurs d'avoir besoin de technologies d'assistance en premier lieu. Les lignes uniques ou les titres peuvent utiliser un espacement plus serré.
Relevant test criteria:
WCAG Success Criteria:
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Fonts Polices

Impact Medium Moyen

Location /html[1]/body[1]/main[1]/div[1]/div[3]/h2[1]/strong[1]/strong[1]

Code Snippet
<strong>Join our growing tester team.</strong>

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
What the issue is:

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines.

La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.

Why this is important:

Tight line spacing makes text difficult to read and track, especially for blocks of text. Adequate line spacing (1.5x or higher) helps users with dyslexia distinguish lines, improves reading comprehension, and reduces eye strain. This fails WCAG 5.2.4 Accessibility Supported because insufficient line height forces users to rely on assistive technologies (custom stylesheets, browser extensions, or reader modes) when they otherwise wouldn't need them. The content should be accessibility-supported by default, not require users to apply technical workarounds to make it readable.

Un espacement de ligne serré rend le texte difficile à lire et à suivre, particulièrement pour les blocs de texte. Un espacement de ligne adéquat (1,5x ou plus) aide les utilisateurs dyslexiques à distinguer les lignes, améliore la compréhension de lecture et réduit la fatigue oculaire. Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car une hauteur de ligne insuffisante force les utilisateurs à recourir aux technologies d'assistance (feuilles de style personnalisées, extensions de navigateur ou modes de lecture) alors qu'ils n'en auraient pas besoin autrement. Le contenu devrait être accessible par défaut, sans obliger les utilisateurs à appliquer des solutions techniques pour le rendre lisible.

Who it affects:

Users with dyslexia who need clear line separation, users with low vision who track lines of text, older users, users with reading disabilities, users who experience eye strain.

Utilisateurs dyslexiques qui ont besoin d'une séparation claire des lignes, utilisateurs malvoyants qui suivent les lignes de texte, utilisateurs âgés, utilisateurs avec des troubles de la lecture, utilisateurs qui éprouvent de la fatigue oculaire.

How to remediate:
Set line-height to at least 1.5 for blocks of text with multiple lines. For this element with font size %(fontSize)spx, the line height should be at least %(minLineHeight)spx (currently %(lineHeight)spx). Note: While WCAG 1.4.12 requires that user-applied spacing adjustments don't break the layout, providing adequate default line height (5.2.4 Accessibility Supported) prevents users from needing assistive technologies in the first place. Single lines or headings may use tighter spacing.
Définir la hauteur de ligne à au moins 1,5 pour les blocs de texte avec plusieurs lignes. Pour cet élément avec une taille de police de %(fontSize)spx, la hauteur de ligne devrait être d'au moins %(minLineHeight)spx (actuellement %(lineHeight)spx). Note : Bien que WCAG 1.4.12 exige que les ajustements d'espacement appliqués par l'utilisateur ne cassent pas la mise en page, fournir une hauteur de ligne par défaut adéquate (5.2.4 Prise en charge de l'accessibilité) évite aux utilisateurs d'avoir besoin de technologies d'assistance en premier lieu. Les lignes uniques ou les titres peuvent utiliser un espacement plus serré.
Relevant test criteria:
WCAG Success Criteria:
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Fonts Polices

Impact Medium Moyen

Location /html[1]/body[1]/main[1]/div[1]/div[3]/div[1]/div[1]/a[1]

Code Snippet
<a class="wp-block-button__link has-text-align-left wp-element-button" href="https://cnib-accesslabs.ca/contact-us/">Contact Us</a>

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
What the issue is:

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines.

La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.

Why this is important:

Tight line spacing makes text difficult to read and track, especially for blocks of text. Adequate line spacing (1.5x or higher) helps users with dyslexia distinguish lines, improves reading comprehension, and reduces eye strain. This fails WCAG 5.2.4 Accessibility Supported because insufficient line height forces users to rely on assistive technologies (custom stylesheets, browser extensions, or reader modes) when they otherwise wouldn't need them. The content should be accessibility-supported by default, not require users to apply technical workarounds to make it readable.

Un espacement de ligne serré rend le texte difficile à lire et à suivre, particulièrement pour les blocs de texte. Un espacement de ligne adéquat (1,5x ou plus) aide les utilisateurs dyslexiques à distinguer les lignes, améliore la compréhension de lecture et réduit la fatigue oculaire. Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car une hauteur de ligne insuffisante force les utilisateurs à recourir aux technologies d'assistance (feuilles de style personnalisées, extensions de navigateur ou modes de lecture) alors qu'ils n'en auraient pas besoin autrement. Le contenu devrait être accessible par défaut, sans obliger les utilisateurs à appliquer des solutions techniques pour le rendre lisible.

Who it affects:

Users with dyslexia who need clear line separation, users with low vision who track lines of text, older users, users with reading disabilities, users who experience eye strain.

Utilisateurs dyslexiques qui ont besoin d'une séparation claire des lignes, utilisateurs malvoyants qui suivent les lignes de texte, utilisateurs âgés, utilisateurs avec des troubles de la lecture, utilisateurs qui éprouvent de la fatigue oculaire.

How to remediate:
Set line-height to at least 1.5 for blocks of text with multiple lines. For this element with font size %(fontSize)spx, the line height should be at least %(minLineHeight)spx (currently %(lineHeight)spx). Note: While WCAG 1.4.12 requires that user-applied spacing adjustments don't break the layout, providing adequate default line height (5.2.4 Accessibility Supported) prevents users from needing assistive technologies in the first place. Single lines or headings may use tighter spacing.
Définir la hauteur de ligne à au moins 1,5 pour les blocs de texte avec plusieurs lignes. Pour cet élément avec une taille de police de %(fontSize)spx, la hauteur de ligne devrait être d'au moins %(minLineHeight)spx (actuellement %(lineHeight)spx). Note : Bien que WCAG 1.4.12 exige que les ajustements d'espacement appliqués par l'utilisateur ne cassent pas la mise en page, fournir une hauteur de ligne par défaut adéquate (5.2.4 Prise en charge de l'accessibilité) évite aux utilisateurs d'avoir besoin de technologies d'assistance en premier lieu. Les lignes uniques ou les titres peuvent utiliser un espacement plus serré.
Relevant test criteria:
WCAG Success Criteria:
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Fonts Polices

Impact Medium Moyen

Location /html[1]/body[1]/footer[1]/div[1]/div[1]/div[1]/h2[1]/strong[1]

Code Snippet
<strong>Subscribe to our newsletter</strong>

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
What the issue is:

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines.

La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.

Why this is important:

Tight line spacing makes text difficult to read and track, especially for blocks of text. Adequate line spacing (1.5x or higher) helps users with dyslexia distinguish lines, improves reading comprehension, and reduces eye strain. This fails WCAG 5.2.4 Accessibility Supported because insufficient line height forces users to rely on assistive technologies (custom stylesheets, browser extensions, or reader modes) when they otherwise wouldn't need them. The content should be accessibility-supported by default, not require users to apply technical workarounds to make it readable.

Un espacement de ligne serré rend le texte difficile à lire et à suivre, particulièrement pour les blocs de texte. Un espacement de ligne adéquat (1,5x ou plus) aide les utilisateurs dyslexiques à distinguer les lignes, améliore la compréhension de lecture et réduit la fatigue oculaire. Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car une hauteur de ligne insuffisante force les utilisateurs à recourir aux technologies d'assistance (feuilles de style personnalisées, extensions de navigateur ou modes de lecture) alors qu'ils n'en auraient pas besoin autrement. Le contenu devrait être accessible par défaut, sans obliger les utilisateurs à appliquer des solutions techniques pour le rendre lisible.

Who it affects:

Users with dyslexia who need clear line separation, users with low vision who track lines of text, older users, users with reading disabilities, users who experience eye strain.

Utilisateurs dyslexiques qui ont besoin d'une séparation claire des lignes, utilisateurs malvoyants qui suivent les lignes de texte, utilisateurs âgés, utilisateurs avec des troubles de la lecture, utilisateurs qui éprouvent de la fatigue oculaire.

How to remediate:
Set line-height to at least 1.5 for blocks of text with multiple lines. For this element with font size %(fontSize)spx, the line height should be at least %(minLineHeight)spx (currently %(lineHeight)spx). Note: While WCAG 1.4.12 requires that user-applied spacing adjustments don't break the layout, providing adequate default line height (5.2.4 Accessibility Supported) prevents users from needing assistive technologies in the first place. Single lines or headings may use tighter spacing.
Définir la hauteur de ligne à au moins 1,5 pour les blocs de texte avec plusieurs lignes. Pour cet élément avec une taille de police de %(fontSize)spx, la hauteur de ligne devrait être d'au moins %(minLineHeight)spx (actuellement %(lineHeight)spx). Note : Bien que WCAG 1.4.12 exige que les ajustements d'espacement appliqués par l'utilisateur ne cassent pas la mise en page, fournir une hauteur de ligne par défaut adéquate (5.2.4 Prise en charge de l'accessibilité) évite aux utilisateurs d'avoir besoin de technologies d'assistance en premier lieu. Les lignes uniques ou les titres peuvent utiliser un espacement plus serré.
Relevant test criteria:
WCAG Success Criteria:
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Fonts Polices

Impact Medium Moyen

Location /html[1]/body[1]/footer[1]/div[1]/div[1]/div[3]/div[1]/div[1]/a[1]

Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/subscribe/">Subscribe</a>

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines. La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.
About this issue:
What the issue is:

Line height is %(lineHeight)spx with a ratio of %(ratio)s for font size %(fontSize)spx. Best practice recommends line height of at least 1.5 times the font size, especially for blocks of text with multiple adjacent lines.

La hauteur de ligne est de %(lineHeight)spx avec un ratio de %(ratio)s pour une taille de police de %(fontSize)spx. Les bonnes pratiques recommandent une hauteur de ligne d'au moins 1,5 fois la taille de police, particulièrement pour les blocs de texte avec plusieurs lignes adjacentes.

Why this is important:

Tight line spacing makes text difficult to read and track, especially for blocks of text. Adequate line spacing (1.5x or higher) helps users with dyslexia distinguish lines, improves reading comprehension, and reduces eye strain. This fails WCAG 5.2.4 Accessibility Supported because insufficient line height forces users to rely on assistive technologies (custom stylesheets, browser extensions, or reader modes) when they otherwise wouldn't need them. The content should be accessibility-supported by default, not require users to apply technical workarounds to make it readable.

Un espacement de ligne serré rend le texte difficile à lire et à suivre, particulièrement pour les blocs de texte. Un espacement de ligne adéquat (1,5x ou plus) aide les utilisateurs dyslexiques à distinguer les lignes, améliore la compréhension de lecture et réduit la fatigue oculaire. Ceci échoue au critère WCAG 5.2.4 Prise en charge de l'accessibilité car une hauteur de ligne insuffisante force les utilisateurs à recourir aux technologies d'assistance (feuilles de style personnalisées, extensions de navigateur ou modes de lecture) alors qu'ils n'en auraient pas besoin autrement. Le contenu devrait être accessible par défaut, sans obliger les utilisateurs à appliquer des solutions techniques pour le rendre lisible.

Who it affects:

Users with dyslexia who need clear line separation, users with low vision who track lines of text, older users, users with reading disabilities, users who experience eye strain.

Utilisateurs dyslexiques qui ont besoin d'une séparation claire des lignes, utilisateurs malvoyants qui suivent les lignes de texte, utilisateurs âgés, utilisateurs avec des troubles de la lecture, utilisateurs qui éprouvent de la fatigue oculaire.

How to remediate:
Set line-height to at least 1.5 for blocks of text with multiple lines. For this element with font size %(fontSize)spx, the line height should be at least %(minLineHeight)spx (currently %(lineHeight)spx). Note: While WCAG 1.4.12 requires that user-applied spacing adjustments don't break the layout, providing adequate default line height (5.2.4 Accessibility Supported) prevents users from needing assistive technologies in the first place. Single lines or headings may use tighter spacing.
Définir la hauteur de ligne à au moins 1,5 pour les blocs de texte avec plusieurs lignes. Pour cet élément avec une taille de police de %(fontSize)spx, la hauteur de ligne devrait être d'au moins %(minLineHeight)spx (actuellement %(lineHeight)spx). Note : Bien que WCAG 1.4.12 exige que les ajustements d'espacement appliqués par l'utilisateur ne cassent pas la mise en page, fournir une hauteur de ligne par défaut adéquate (5.2.4 Prise en charge de l'accessibilité) évite aux utilisateurs d'avoir besoin de technologies d'assistance en premier lieu. Les lignes uniques ou les titres peuvent utiliser un espacement plus serré.
Relevant test criteria:
WCAG Success Criteria:
  • 5 5
  • . .
  • 2 2
  • . .
  • 4 4

Touchpoint Fonts Polices

Impact Medium Moyen

Location /html[1]/body[1]/footer[1]/div[2]/h2[1]

Code Snippet
<h2 class="screen-reader-text">Footer</h2>
Forms Formulaires

Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against. Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.
About this issue:
What the issue is:

Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against.

Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.

Why this is important:

When outline-offset is positive, the outline sits outside the button against the parent container's background. The total extent of the outline is outline-offset + outline-width. If this total exceeds the distance from the button edge to the parent edge on any side, the outline extends past the parent boundary into whatever content lies beyond. The outline may sit against varying backgrounds outside the parent (page background, sibling elements, grandparent containers, etc.), making automatic contrast verification impossible. CSS outline-offset has no maximum limit, so extremely large values (e.g., outline-offset: 50px) can easily exceed typical parent padding and margins.

Quand outline-offset est positif, le contour se trouve à l'extérieur du bouton contre l'arrière-plan du conteneur parent. L'étendue totale du contour est outline-offset + outline-width. Si ce total dépasse la distance du bord du bouton au bord du parent sur n'importe quel côté, le contour s'étend au-delà de la limite du parent dans tout contenu qui se trouve au-delà. Le contour peut se trouver contre des arrière-plans variables à l'extérieur du parent (arrière-plan de page, éléments frères, conteneurs grands-parents, etc.), rendant la vérification automatique du contraste impossible. CSS outline-offset n'a pas de limite maximale, donc des valeurs extrêmement grandes (ex. outline-offset: 50px) peuvent facilement dépasser le padding et les marges typiques du parent.

Who it affects:

Keyboard navigation users, users with low vision, users with color vision deficiencies who need sufficient contrast between focus indicators and backgrounds

Utilisateurs de navigation au clavier, utilisateurs malvoyants, utilisateurs avec déficiences de vision des couleurs qui ont besoin d'un contraste suffisant entre les indicateurs de focus et les arrière-plans

How to remediate:
Manually test the focus outline visibility against all backgrounds it may appear against outside the parent container. Solutions: 1) Reduce outline-offset and/or outline-width so outline stays within parent bounds (ensure parent has sufficient padding), 2) Increase parent padding to contain the full outline extent, 3) Set outline-offset to 0 and use box-shadow for spacing: button:focus { outline: 3px solid blue; outline-offset: 0; box-shadow: 0 0 0 2px white; }, 4) Use a high-contrast outline color (e.g., white with black box-shadow or vice versa) that works against any background: button:focus { outline: 2px solid white; box-shadow: 0 0 0 4px black; }
Tester manuellement la visibilité du contour de focus contre tous les arrière-plans sur lesquels il peut apparaître à l'extérieur du conteneur parent. Solutions : 1) Réduire outline-offset et/ou outline-width pour que le contour reste dans les limites du parent (s'assurer que le parent a un padding suffisant), 2) Augmenter le padding du parent pour contenir toute l'étendue du contour, 3) Définir outline-offset à 0 et utiliser box-shadow pour l'espacement : button:focus { outline: 3px solid blue; outline-offset: 0; box-shadow: 0 0 0 2px white; }, 4) Utiliser une couleur de contour à contraste élevé (ex. blanc avec box-shadow noir ou vice versa) qui fonctionne contre tout arrière-plan : button:focus { outline: 2px solid white; box-shadow: 0 0 0 4px black; }
Relevant test criteria:
WCAG Success Criteria:
  • 2 2
  • . .
  • 4 4
  • . .
  • 7 7
  • , ,
  • 1 1
  • . .
  • 4 4
  • . .
  • 1 1
  • 1 1

Touchpoint Forms Formulaires

Impact Medium Moyen

Location //*[@id="menu-item-5067"]/button[1]

Code Snippet
<button aria-haspopup="true" aria-expanded="true">Inclusive Built Environment</button>

Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against. Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.
About this issue:
What the issue is:

Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against.

Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.

Why this is important:

When outline-offset is positive, the outline sits outside the button against the parent container's background. The total extent of the outline is outline-offset + outline-width. If this total exceeds the distance from the button edge to the parent edge on any side, the outline extends past the parent boundary into whatever content lies beyond. The outline may sit against varying backgrounds outside the parent (page background, sibling elements, grandparent containers, etc.), making automatic contrast verification impossible. CSS outline-offset has no maximum limit, so extremely large values (e.g., outline-offset: 50px) can easily exceed typical parent padding and margins.

Quand outline-offset est positif, le contour se trouve à l'extérieur du bouton contre l'arrière-plan du conteneur parent. L'étendue totale du contour est outline-offset + outline-width. Si ce total dépasse la distance du bord du bouton au bord du parent sur n'importe quel côté, le contour s'étend au-delà de la limite du parent dans tout contenu qui se trouve au-delà. Le contour peut se trouver contre des arrière-plans variables à l'extérieur du parent (arrière-plan de page, éléments frères, conteneurs grands-parents, etc.), rendant la vérification automatique du contraste impossible. CSS outline-offset n'a pas de limite maximale, donc des valeurs extrêmement grandes (ex. outline-offset: 50px) peuvent facilement dépasser le padding et les marges typiques du parent.

Who it affects:

Keyboard navigation users, users with low vision, users with color vision deficiencies who need sufficient contrast between focus indicators and backgrounds

Utilisateurs de navigation au clavier, utilisateurs malvoyants, utilisateurs avec déficiences de vision des couleurs qui ont besoin d'un contraste suffisant entre les indicateurs de focus et les arrière-plans

How to remediate:
Manually test the focus outline visibility against all backgrounds it may appear against outside the parent container. Solutions: 1) Reduce outline-offset and/or outline-width so outline stays within parent bounds (ensure parent has sufficient padding), 2) Increase parent padding to contain the full outline extent, 3) Set outline-offset to 0 and use box-shadow for spacing: button:focus { outline: 3px solid blue; outline-offset: 0; box-shadow: 0 0 0 2px white; }, 4) Use a high-contrast outline color (e.g., white with black box-shadow or vice versa) that works against any background: button:focus { outline: 2px solid white; box-shadow: 0 0 0 4px black; }
Tester manuellement la visibilité du contour de focus contre tous les arrière-plans sur lesquels il peut apparaître à l'extérieur du conteneur parent. Solutions : 1) Réduire outline-offset et/ou outline-width pour que le contour reste dans les limites du parent (s'assurer que le parent a un padding suffisant), 2) Augmenter le padding du parent pour contenir toute l'étendue du contour, 3) Définir outline-offset à 0 et utiliser box-shadow pour l'espacement : button:focus { outline: 3px solid blue; outline-offset: 0; box-shadow: 0 0 0 2px white; }, 4) Utiliser une couleur de contour à contraste élevé (ex. blanc avec box-shadow noir ou vice versa) qui fonctionne contre tout arrière-plan : button:focus { outline: 2px solid white; box-shadow: 0 0 0 4px black; }
Relevant test criteria:
WCAG Success Criteria:
  • 2 2
  • . .
  • 4 4
  • . .
  • 7 7
  • , ,
  • 1 1
  • . .
  • 4 4
  • . .
  • 1 1
  • 1 1

Touchpoint Forms Formulaires

Impact Medium Moyen

Location //*[@id="menu-item-5068"]/button[1]

Code Snippet
<button aria-haspopup="true" aria-expanded="true">Inclusive Digital Design &amp; Testing</button>

Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against. Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.
About this issue:
What the issue is:

Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against.

Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.

Why this is important:

When outline-offset is positive, the outline sits outside the button against the parent container's background. The total extent of the outline is outline-offset + outline-width. If this total exceeds the distance from the button edge to the parent edge on any side, the outline extends past the parent boundary into whatever content lies beyond. The outline may sit against varying backgrounds outside the parent (page background, sibling elements, grandparent containers, etc.), making automatic contrast verification impossible. CSS outline-offset has no maximum limit, so extremely large values (e.g., outline-offset: 50px) can easily exceed typical parent padding and margins.

Quand outline-offset est positif, le contour se trouve à l'extérieur du bouton contre l'arrière-plan du conteneur parent. L'étendue totale du contour est outline-offset + outline-width. Si ce total dépasse la distance du bord du bouton au bord du parent sur n'importe quel côté, le contour s'étend au-delà de la limite du parent dans tout contenu qui se trouve au-delà. Le contour peut se trouver contre des arrière-plans variables à l'extérieur du parent (arrière-plan de page, éléments frères, conteneurs grands-parents, etc.), rendant la vérification automatique du contraste impossible. CSS outline-offset n'a pas de limite maximale, donc des valeurs extrêmement grandes (ex. outline-offset: 50px) peuvent facilement dépasser le padding et les marges typiques du parent.

Who it affects:

Keyboard navigation users, users with low vision, users with color vision deficiencies who need sufficient contrast between focus indicators and backgrounds

Utilisateurs de navigation au clavier, utilisateurs malvoyants, utilisateurs avec déficiences de vision des couleurs qui ont besoin d'un contraste suffisant entre les indicateurs de focus et les arrière-plans

How to remediate:
Manually test the focus outline visibility against all backgrounds it may appear against outside the parent container. Solutions: 1) Reduce outline-offset and/or outline-width so outline stays within parent bounds (ensure parent has sufficient padding), 2) Increase parent padding to contain the full outline extent, 3) Set outline-offset to 0 and use box-shadow for spacing: button:focus { outline: 3px solid blue; outline-offset: 0; box-shadow: 0 0 0 2px white; }, 4) Use a high-contrast outline color (e.g., white with black box-shadow or vice versa) that works against any background: button:focus { outline: 2px solid white; box-shadow: 0 0 0 4px black; }
Tester manuellement la visibilité du contour de focus contre tous les arrière-plans sur lesquels il peut apparaître à l'extérieur du conteneur parent. Solutions : 1) Réduire outline-offset et/ou outline-width pour que le contour reste dans les limites du parent (s'assurer que le parent a un padding suffisant), 2) Augmenter le padding du parent pour contenir toute l'étendue du contour, 3) Définir outline-offset à 0 et utiliser box-shadow pour l'espacement : button:focus { outline: 3px solid blue; outline-offset: 0; box-shadow: 0 0 0 2px white; }, 4) Utiliser une couleur de contour à contraste élevé (ex. blanc avec box-shadow noir ou vice versa) qui fonctionne contre tout arrière-plan : button:focus { outline: 2px solid white; box-shadow: 0 0 0 4px black; }
Relevant test criteria:
WCAG Success Criteria:
  • 2 2
  • . .
  • 4 4
  • . .
  • 7 7
  • , ,
  • 1 1
  • . .
  • 4 4
  • . .
  • 1 1
  • 1 1

Touchpoint Forms Formulaires

Impact Medium Moyen

Location //*[@id="menu-main-menu-1"]/li[1]/button[1]

Code Snippet
<button aria-haspopup="true" aria-expanded="true">Inclusive Built Environment</button>

Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against. Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.
About this issue:
What the issue is:

Button has a focus outline with outline-offset and outline-width values that, when combined, cause the outline to extend beyond the boundaries of its parent container. Since the outline sits against the parent's background, but extends past the parent's edges, we cannot determine what background the extended portion of the outline sits against.

Le bouton a un contour de focus avec des valeurs outline-offset et outline-width qui, combinées, font que le contour s'étend au-delà des limites de son conteneur parent. Puisque le contour se trouve contre l'arrière-plan du parent, mais s'étend au-delà des bords du parent, nous ne pouvons déterminer contre quel arrière-plan se trouve la partie étendue du contour.

Why this is important:

When outline-offset is positive, the outline sits outside the button against the parent container's background. The total extent of the outline is outline-offset + outline-width. If this total exceeds the distance from the button edge to the parent edge on any side, the outline extends past the parent boundary into whatever content lies beyond. The outline may sit against varying backgrounds outside the parent (page background, sibling elements, grandparent containers, etc.), making automatic contrast verification impossible. CSS outline-offset has no maximum limit, so extremely large values (e.g., outline-offset: 50px) can easily exceed typical parent padding and margins.

Quand outline-offset est positif, le contour se trouve à l'extérieur du bouton contre l'arrière-plan du conteneur parent. L'étendue totale du contour est outline-offset + outline-width. Si ce total dépasse la distance du bord du bouton au bord du parent sur n'importe quel côté, le contour s'étend au-delà de la limite du parent dans tout contenu qui se trouve au-delà. Le contour peut se trouver contre des arrière-plans variables à l'extérieur du parent (arrière-plan de page, éléments frères, conteneurs grands-parents, etc.), rendant la vérification automatique du contraste impossible. CSS outline-offset n'a pas de limite maximale, donc des valeurs extrêmement grandes (ex. outline-offset: 50px) peuvent facilement dépasser le padding et les marges typiques du parent.

Who it affects:

Keyboard navigation users, users with low vision, users with color vision deficiencies who need sufficient contrast between focus indicators and backgrounds

Utilisateurs de navigation au clavier, utilisateurs malvoyants, utilisateurs avec déficiences de vision des couleurs qui ont besoin d'un contraste suffisant entre les indicateurs de focus et les arrière-plans

How to remediate:
Manually test the focus outline visibility against all backgrounds it may appear against outside the parent container. Solutions: 1) Reduce outline-offset and/or outline-width so outline stays within parent bounds (ensure parent has sufficient padding), 2) Increase parent padding to contain the full outline extent, 3) Set outline-offset to 0 and use box-shadow for spacing: button:focus { outline: 3px solid blue; outline-offset: 0; box-shadow: 0 0 0 2px white; }, 4) Use a high-contrast outline color (e.g., white with black box-shadow or vice versa) that works against any background: button:focus { outline: 2px solid white; box-shadow: 0 0 0 4px black; }
Tester manuellement la visibilité du contour de focus contre tous les arrière-plans sur lesquels il peut apparaître à l'extérieur du conteneur parent. Solutions : 1) Réduire outline-offset et/ou outline-width pour que le contour reste dans les limites du parent (s'assurer que le parent a un padding suffisant), 2) Augmenter le padding du parent pour contenir toute l'étendue du contour, 3) Définir outline-offset à 0 et utiliser box-shadow pour l'espacement : button:focus { outline: 3px solid blue; outline-offset: 0; box-shadow: 0 0 0 2px white; }, 4) Utiliser une couleur de contour à contraste élevé (ex. blanc avec box-shadow noir ou vice versa) qui fonctionne contre tout arrière-plan : button:focus { outline: 2px solid white; box-shadow: 0 0 0 4px black; }
Relevant test criteria:
WCAG Success Criteria:
  • 2 2
  • . .
  • 4 4
  • . .
  • 7 7
  • , ,
  • 1 1
  • . .
  • 4 4
  • . .
  • 1 1
  • 1 1

Touchpoint Forms Formulaires

Impact Medium Moyen

Location //*[@id="menu-main-menu-1"]/li[2]/button[1]

Code Snippet
<button aria-haspopup="true" aria-expanded="true">Inclusive Digital Design &amp; Testing</button>
Headings Titres

Heading is hidden with display:none Le titre est masqué avec display:none
About this issue:
What the issue is:

Heading is hidden with display:none

Le titre est masqué avec display:none

Why this is important:

Hidden headings may affect document structure

Les titres masqués peuvent affecter la structure du document

Who it affects:

Screen reader users (varies by implementation)

Utilisateurs de lecteurs d'écran (varie selon l'implémentation)

How to remediate:
Remove unused headings or make them visible
Supprimez les titres inutilisés ou rendez-les visibles
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[2]/h3[1]

Code Snippet
<h3 class="has-h-4-font-size french-only" id="have-a-questions-contact-us"><strong>Vous avez des questions? Contactez nous!</strong></h3>

Heading is hidden with display:none Le titre est masqué avec display:none
About this issue:
What the issue is:

Heading is hidden with display:none

Le titre est masqué avec display:none

Why this is important:

Hidden headings may affect document structure

Les titres masqués peuvent affecter la structure du document

Who it affects:

Screen reader users (varies by implementation)

Utilisateurs de lecteurs d'écran (varie selon l'implémentation)

How to remediate:
Remove unused headings or make them visible
Supprimez les titres inutilisés ou rendez-les visibles
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[8]/h3[1]

Code Snippet
<h3 id="we-are-proud-partners-of" class="has-h-4-font-size french-only"><strong>Nous sommes fiers d'être partenaires de</strong></h3>
Links Liens

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //body/a[1]

Code Snippet
<a class="skip-link screen-reader-text" href="#headline">Skip to content</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //body/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[1]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/become-a-tester/" class="wpml-ls-link">
                    <span class="wpml-ls-native">English</span></a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //body/header[1]/div[1]/div[1]/div[2]/div[1]/div[1]/div[2]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/fr/devenez-un-testeur/" class="wpml-ls-link">
                    <span class="wpml-ls-native" lang="fr">Français</span><span class="wpml-ls-display"><span class="w

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //li[@id="menu-item-3805"]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/about-us/">About Us</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //li[@id="menu-item-3806"]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/become-a-tester/" aria-current="page">Become a Tester</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //li[@id="menu-item-6054"]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-cx-2/">Inclusive CX</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //li[@id="menu-item-3809"]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/news/">News</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //li[@id="menu-item-3810"]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/contact-us/">Contact Us</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[1]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/">Inclusive Built Environment Overview</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[2]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/lived-experience-accessibility-testing/">Lived Experience Accessibility Testing</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[3]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/navigation-wayfinding/">Navigation &amp; Wayfinding</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[4]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/accessible-signage/">Accessible Signage</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[5]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/communication-materials/">Communication Materials</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[6]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/workplace-assessment/">Workplace Assessment</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[7]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/research-planning/">Research &amp; Planning</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[1]/ul[1]/li[8]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/be-my-eyes/">Be My Eyes</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[1]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/">Inclusive Digital Design &amp; Testing Overview</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[2]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/lived-user-accessibility-testing/">Lived Experience Accessibility Testing</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[3]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-digital-design-testing/digital-services/">Digital Services</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[2]/ul[1]/li[4]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-built-environment/digital-design-testing/">Digital Design &amp; Testing</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[3]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/about-us/">About Us</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[4]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/become-a-tester/" aria-current="page">Become a Tester</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[5]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/inclusive-cx-2/">Inclusive CX</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[6]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/news/">News</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //ul[@id="menu-main-menu-1"]/li[7]/a[1]

Code Snippet
<a href="https://cnib-accesslabs.ca/contact-us/">Contact Us</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //div[@id="gspb_container-id-gsbp-48a69b40-ef5f"]/div[1]/div[1]/a[1]

Code Snippet
<a class="wp-block-button__link has-text-align-left wp-element-button" href="https://cnib-accesslabs.ca/contact-us/">Contact Us</a>

Link is styled to look like a button but uses anchor element Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor
About this issue:
What the issue is:

Link is styled to look like a button but uses anchor element

Le lien est stylisé pour ressembler à un bouton mais utilise un élément anchor

Why this is important:

Links and buttons have different behaviors - links navigate to new locations while buttons trigger actions. When links look like buttons, users may have incorrect expectations about what will happen. Keyboard users expect Space key to activate buttons but it doesn't work on links.

Les liens et boutons ont des comportements différents - les liens naviguent vers de nouveaux emplacements tandis que les boutons déclenchent des actions. Lorsque les liens ressemblent à des boutons, les utilisateurs peuvent avoir des attentes incorrectes sur ce qui va se passer. Les utilisateurs de clavier s'attendent à ce que la touche Espace active les boutons mais cela ne fonctionne pas sur les liens.

Who it affects:

Keyboard users who expect button behavior, screen reader users who hear it announced as a link but see it as a button, and users with cognitive disabilities who rely on consistent interactions

Les utilisateurs de clavier qui s'attendent à un comportement de bouton, les utilisateurs de lecteurs d'écran qui l'entendent annoncé comme un lien mais le voient comme un bouton, et les utilisateurs ayant des déficiences cognitives qui comptent sur des interactions cohérentes

How to remediate:
If the element performs an action (submit form, open dialog), use a button element. If it navigates to a new URL, keep it as a link but consider whether button styling is appropriate. Ensure keyboard behavior matches the element type.
Si l'élément effectue une action (soumettre un formulaire, ouvrir une boîte de dialogue), utilisez un élément button. S'il navigue vers une nouvelle URL, gardez-le comme lien mais considérez si le style de bouton est approprié. Assurez-vous que le comportement du clavier correspond au type d'élément.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Links Liens

Impact Low Faible

Location //body/footer[1]/div[1]/div[1]/div[3]/div[1]/div[1]/a[1]

Code Snippet
<a class="wp-block-button__link wp-element-button" href="https://cnib-accesslabs.ca/subscribe/">Subscribe</a>
Lists Listes

List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s
About this issue:
What the issue is:

List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s

L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s

Why this is important:

Custom bullets using CSS ::before pseudo-elements, background images, or embedded images may not be announced correctly by screen readers. While the list structure is preserved, custom visual bullets might not provide the same semantic cues or be available to assistive technologies. This can reduce the clarity of list navigation for screen reader users.

Les puces personnalisées utilisant des pseudo-éléments CSS ::before, des images d'arrière-plan ou des images intégrées peuvent ne pas être annoncées correctement par les lecteurs d'écran. Bien que la structure de liste soit préservée, les puces visuelles personnalisées pourraient ne pas fournir les mêmes indices sémantiques ou être disponibles pour les technologies d'assistance. Cela peut réduire la clarté de la navigation de liste pour les utilisateurs de lecteurs d'écran.

Who it affects:

Screen reader users who may miss visual bullet cues, users with custom stylesheets who override author styles, users relying on list semantics for navigation.

Utilisateurs de lecteurs d'écran qui peuvent manquer les indices visuels des puces, utilisateurs avec des feuilles de style personnalisées qui remplacent les styles de l'auteur, utilisateurs s'appuyant sur la sémantique de liste pour la navigation.

How to remediate:
Consider using standard list-style-type values (disc, circle, square, decimal, etc.) which are better supported by assistive technologies. If custom bullets are required, use the CSS ::marker pseudo-element instead of ::before, as ::marker is specifically designed for this purpose and has better accessibility support. Ensure the list-style-type property is not set to 'none'. Test with screen readers to verify list navigation works correctly.
Envisagez d'utiliser des valeurs standard de list-style-type (disc, circle, square, decimal, etc.) qui sont mieux prises en charge par les technologies d'assistance. Si des puces personnalisées sont nécessaires, utilisez le pseudo-élément CSS ::marker au lieu de ::before, car ::marker est spécifiquement conçu à cet effet et offre un meilleur support d'accessibilité. Assurez-vous que la propriété list-style-type n'est pas définie sur 'none'. Testez avec des lecteurs d'écran pour vérifier que la navigation dans la liste fonctionne correctement.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Lists Listes

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[1]

Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4858" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_ONLY_Wht_FRE_.png" alt="INCA"></li>

List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s
About this issue:
What the issue is:

List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s

L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s

Why this is important:

Custom bullets using CSS ::before pseudo-elements, background images, or embedded images may not be announced correctly by screen readers. While the list structure is preserved, custom visual bullets might not provide the same semantic cues or be available to assistive technologies. This can reduce the clarity of list navigation for screen reader users.

Les puces personnalisées utilisant des pseudo-éléments CSS ::before, des images d'arrière-plan ou des images intégrées peuvent ne pas être annoncées correctement par les lecteurs d'écran. Bien que la structure de liste soit préservée, les puces visuelles personnalisées pourraient ne pas fournir les mêmes indices sémantiques ou être disponibles pour les technologies d'assistance. Cela peut réduire la clarté de la navigation de liste pour les utilisateurs de lecteurs d'écran.

Who it affects:

Screen reader users who may miss visual bullet cues, users with custom stylesheets who override author styles, users relying on list semantics for navigation.

Utilisateurs de lecteurs d'écran qui peuvent manquer les indices visuels des puces, utilisateurs avec des feuilles de style personnalisées qui remplacent les styles de l'auteur, utilisateurs s'appuyant sur la sémantique de liste pour la navigation.

How to remediate:
Consider using standard list-style-type values (disc, circle, square, decimal, etc.) which are better supported by assistive technologies. If custom bullets are required, use the CSS ::marker pseudo-element instead of ::before, as ::marker is specifically designed for this purpose and has better accessibility support. Ensure the list-style-type property is not set to 'none'. Test with screen readers to verify list navigation works correctly.
Envisagez d'utiliser des valeurs standard de list-style-type (disc, circle, square, decimal, etc.) qui sont mieux prises en charge par les technologies d'assistance. Si des puces personnalisées sont nécessaires, utilisez le pseudo-élément CSS ::marker au lieu de ::before, car ::marker est spécifiquement conçu à cet effet et offre un meilleur support d'accessibilité. Assurez-vous que la propriété list-style-type n'est pas définie sur 'none'. Testez avec des lecteurs d'écran pour vérifier que la navigation dans la liste fonctionne correctement.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Lists Listes

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[2]

Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4866" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_FR_withMC.png" alt="Readaptation En Defic

List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s
About this issue:
What the issue is:

List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s

L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s

Why this is important:

Custom bullets using CSS ::before pseudo-elements, background images, or embedded images may not be announced correctly by screen readers. While the list structure is preserved, custom visual bullets might not provide the same semantic cues or be available to assistive technologies. This can reduce the clarity of list navigation for screen reader users.

Les puces personnalisées utilisant des pseudo-éléments CSS ::before, des images d'arrière-plan ou des images intégrées peuvent ne pas être annoncées correctement par les lecteurs d'écran. Bien que la structure de liste soit préservée, les puces visuelles personnalisées pourraient ne pas fournir les mêmes indices sémantiques ou être disponibles pour les technologies d'assistance. Cela peut réduire la clarté de la navigation de liste pour les utilisateurs de lecteurs d'écran.

Who it affects:

Screen reader users who may miss visual bullet cues, users with custom stylesheets who override author styles, users relying on list semantics for navigation.

Utilisateurs de lecteurs d'écran qui peuvent manquer les indices visuels des puces, utilisateurs avec des feuilles de style personnalisées qui remplacent les styles de l'auteur, utilisateurs s'appuyant sur la sémantique de liste pour la navigation.

How to remediate:
Consider using standard list-style-type values (disc, circle, square, decimal, etc.) which are better supported by assistive technologies. If custom bullets are required, use the CSS ::marker pseudo-element instead of ::before, as ::marker is specifically designed for this purpose and has better accessibility support. Ensure the list-style-type property is not set to 'none'. Test with screen readers to verify list navigation works correctly.
Envisagez d'utiliser des valeurs standard de list-style-type (disc, circle, square, decimal, etc.) qui sont mieux prises en charge par les technologies d'assistance. Si des puces personnalisées sont nécessaires, utilisez le pseudo-élément CSS ::marker au lieu de ::before, car ::marker est spécifiquement conçu à cet effet et offre un meilleur support d'accessibilité. Assurez-vous que la propriété list-style-type n'est pas définie sur 'none'. Testez avec des lecteurs d'écran pour vérifier que la navigation dans la liste fonctionne correctement.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Lists Listes

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[3]

Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4860" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_FR.png" alt="Services Communautaires

List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s
About this issue:
What the issue is:

List item uses %(customType)s for bullets instead of standard list-style-type. Details: %(customDetails)s

L'élément de liste utilise %(customType)s pour les puces au lieu du list-style-type standard. Détails : %(customDetails)s

Why this is important:

Custom bullets using CSS ::before pseudo-elements, background images, or embedded images may not be announced correctly by screen readers. While the list structure is preserved, custom visual bullets might not provide the same semantic cues or be available to assistive technologies. This can reduce the clarity of list navigation for screen reader users.

Les puces personnalisées utilisant des pseudo-éléments CSS ::before, des images d'arrière-plan ou des images intégrées peuvent ne pas être annoncées correctement par les lecteurs d'écran. Bien que la structure de liste soit préservée, les puces visuelles personnalisées pourraient ne pas fournir les mêmes indices sémantiques ou être disponibles pour les technologies d'assistance. Cela peut réduire la clarté de la navigation de liste pour les utilisateurs de lecteurs d'écran.

Who it affects:

Screen reader users who may miss visual bullet cues, users with custom stylesheets who override author styles, users relying on list semantics for navigation.

Utilisateurs de lecteurs d'écran qui peuvent manquer les indices visuels des puces, utilisateurs avec des feuilles de style personnalisées qui remplacent les styles de l'auteur, utilisateurs s'appuyant sur la sémantique de liste pour la navigation.

How to remediate:
Consider using standard list-style-type values (disc, circle, square, decimal, etc.) which are better supported by assistive technologies. If custom bullets are required, use the CSS ::marker pseudo-element instead of ::before, as ::marker is specifically designed for this purpose and has better accessibility support. Ensure the list-style-type property is not set to 'none'. Test with screen readers to verify list navigation works correctly.
Envisagez d'utiliser des valeurs standard de list-style-type (disc, circle, square, decimal, etc.) qui sont mieux prises en charge par les technologies d'assistance. Si des puces personnalisées sont nécessaires, utilisez le pseudo-élément CSS ::marker au lieu de ::before, car ::marker est spécifiquement conçu à cet effet et offre un meilleur support d'accessibilité. Assurez-vous que la propriété list-style-type n'est pas définie sur 'none'. Testez avec des lecteurs d'écran pour vérifier que la navigation dans la liste fonctionne correctement.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Lists Listes

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[4]

Code Snippet
<li><img decoding="async" width="25%" class="wp-image-4854" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_FRE.png" alt="
Styles Styles

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/main[1]/div[1]/div[1]

Code Snippet
<div class="wp-block-cover alignfull is-light is-style-image-right" style="min-height:600px;aspect-ratio:unset;"><span aria-hidden="true" class="wp-block-cover__background has-primary-background-color...

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/main[1]/div[1]/div[3]/p[1]

Code Snippet
<p style="padding-bottom:25px">Let’s build a more inclusive and accessible future for all. Become an accessibility tester today.</p>

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[1]/div[1]/div[2]/div[1]

Code Snippet
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[1]/div[1]/div[5]/div[1]

Code Snippet
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[1]/figure[1]/img[1]

Code Snippet
<img loading="lazy" decoding="async" width="100" height="100" src="https://cnib-accesslabs.ca/wp-content/uploads//CNIB-Footer.svg" alt="CNIB" class="wp-image-39" style="width:300px;height:109px">

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[6]/div[1]

Code Snippet
<div style="height:100px" aria-hidden="true" class="wp-block-spacer footer-section-spacer"></div>

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[3]/div[1]

Code Snippet
<div style="height:31px" aria-hidden="true" class="wp-block-spacer"></div>

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[6]/div[1]

Code Snippet
<div style="height:14px" aria-hidden="true" class="wp-block-spacer"></div>

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[9]/div[1]

Code Snippet
<div style="height:48px" aria-hidden="true" class="wp-block-spacer"></div>

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]

Code Snippet
<ul style="list-style-type:none !important;padding-left:0px;" class="english-only">

<li><img decoding="async" class="wp-image-4858" style="float:left;margin:0;" width="25%" src="https://cnib-accessla...

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[1]/img[1]

Code Snippet
<img decoding="async" class="wp-image-4858" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Logo-White.png" alt="CNIB Foundation" srcset="https...

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[2]/img[1]

Code Snippet
<img decoding="async" class="wp-image-4866" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_EN_withTM.png" alt="Vision Loss Rehabilitatio...

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[3]/img[1]

Code Snippet
<img decoding="async" class="wp-image-4860" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_ENG.png" alt="Deafblind Community Service...

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[10]/ul[1]/li[4]/img[1]

Code Snippet
<img decoding="async" class="wp-image-4854" style="float:left;margin:0;" width="25%" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_ENG.png" alt="CNIB...

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]

Code Snippet
<ul style="list-style-type:none !important;padding-left:0px;" class="french-only">

<li><img decoding="async" width="25%" class="wp-image-4858" style="float:left;margin:0;" src="https://cnib-accesslab...

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[1]/img[1]

Code Snippet
<img decoding="async" width="25%" class="wp-image-4858" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_ONLY_Wht_FRE_.png" alt="INCA">

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[2]/img[1]

Code Snippet
<img decoding="async" width="25%" class="wp-image-4866" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/VLR_Canada_FR_withMC.png" alt="Readaptation En Deficienc...

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[3]/img[1]

Code Snippet
<img decoding="async" width="25%" class="wp-image-4860" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB_Deafblind_FR.png" alt="Services Communautaires Surd...

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[11]/ul[1]/li[4]/img[1]

Code Snippet
<img decoding="async" width="25%" class="wp-image-4854" style="float:left;margin:0;" src="https://cnib-accesslabs.ca/wp-content/uploads/2023/09/CNIB-Foundation_Guide-Dogs_Logo_White_FRE.png" alt="Chie...

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS
About this issue:
What the issue is:

Inline style attributes define layout properties (margin, padding, width, display) directly on HTML elements instead of using CSS classes

Les attributs de style en ligne définissent des propriétés de mise en page (margin, padding, width, display) directement sur les éléments HTML au lieu d'utiliser des classes CSS

Why this is important:

While layout-related inline styles are less problematic for accessibility than color/font styles, they still reduce maintainability, make responsive design harder to implement, and can interfere with user zoom and customization. Inline layout styles scatter presentation logic throughout HTML making it difficult to create consistent designs or implement site-wide changes. They also make it harder for users with custom stylesheets to adjust spacing or layout for their needs.

Bien que les styles en ligne liés à la mise en page soient moins problématiques pour l'accessibilité que les styles de couleur/police, ils réduisent encore la maintenabilité, rendent la conception responsive plus difficile à implémenter et peuvent interférer avec le zoom utilisateur et la personnalisation. Les styles de mise en page en ligne dispersent la logique de présentation dans tout le HTML, rendant difficile la création de conceptions cohérentes ou l'implémentation de changements à l'échelle du site. Ils rendent également plus difficile pour les utilisateurs avec des feuilles de style personnalisées d'ajuster l'espacement ou la mise en page selon leurs besoins.

Who it affects:

Users who need custom stylesheets to adjust layout for readability, users who zoom content and need flexible layouts that adapt properly, developers maintaining the codebase who cannot easily update or debug scattered inline styles, and users with cognitive disabilities who benefit from consistent, predictable layouts

Utilisateurs qui ont besoin de feuilles de style personnalisées pour ajuster la mise en page pour la lisibilité, utilisateurs qui zooment le contenu et ont besoin de mises en page flexibles qui s'adaptent correctement, développeurs maintenant la base de code qui ne peuvent pas facilement mettre à jour ou déboguer les styles en ligne dispersés, et utilisateurs avec des troubles cognitifs qui bénéficient de mises en page cohérentes et prévisibles

How to remediate:
Move layout properties to CSS classes or external stylesheets for better maintainability (replace style="margin: 20px; padding: 10px;" with appropriate CSS classes), use semantic HTML with CSS for layout rather than inline positioning, create reusable utility classes for common spacing patterns, ensure responsive design works properly without inline dimension declarations, and document any truly necessary inline layout styles with comments explaining why they cannot be moved to stylesheets
Déplacer les propriétés de mise en page vers des classes CSS ou des feuilles de style externes pour une meilleure maintenabilité (remplacer style="margin: 20px; padding: 10px;" par des classes CSS appropriées), utiliser du HTML sémantique avec CSS pour la mise en page plutôt que le positionnement en ligne, créer des classes utilitaires réutilisables pour les motifs d'espacement courants, s'assurer que la conception responsive fonctionne correctement sans déclarations de dimensions en ligne, et documenter tout style de mise en page en ligne vraiment nécessaire avec des commentaires expliquant pourquoi ils ne peuvent pas être déplacés vers des feuilles de style
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[12]/div[1]

Code Snippet
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
What the issue is:

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance

Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance

Why this is important:

While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.

Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.

Who it affects:

All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files

Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes

How to remediate:
Move layout CSS from <style> tags to external CSS files loaded via <link> elements, combine styles from multiple pages into shared stylesheets to improve caching, use CSS modules or build tools to manage styles systematically, keep <style> tags only for critical above-the-fold CSS if optimizing initial paint time, document any remaining embedded styles with comments explaining why external CSS isn't suitable, and ensure responsive design and media queries are managed in external files where they can be easily updated
Déplacer le CSS de mise en page des balises <style> vers des fichiers CSS externes chargés via des éléments <link>, combiner les styles de plusieurs pages en feuilles de style partagées pour améliorer la mise en cache, utiliser des modules CSS ou des outils de build pour gérer les styles de manière systématique, garder les balises <style> uniquement pour le CSS critique au-dessus de la ligne de flottaison si l'optimisation du temps de premier affichage est nécessaire, documenter tous les styles intégrés restants avec des commentaires expliquant pourquoi le CSS externe n'est pas approprié, et s'assurer que le design adaptatif et les requêtes média sont gérés dans des fichiers externes où ils peuvent être facilement mis à jour
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/head[1]/style[1]

Code Snippet
<style>
		.wpcf7-submit{
			display:none;
		}
		.recaptcha-btn{
			display:block;
		}
		.grecaptcha-badge {display: none;} 
	</style>

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
What the issue is:

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance

Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance

Why this is important:

While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.

Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.

Who it affects:

All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files

Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes

How to remediate:
Move layout CSS from <style> tags to external CSS files loaded via <link> elements, combine styles from multiple pages into shared stylesheets to improve caching, use CSS modules or build tools to manage styles systematically, keep <style> tags only for critical above-the-fold CSS if optimizing initial paint time, document any remaining embedded styles with comments explaining why external CSS isn't suitable, and ensure responsive design and media queries are managed in external files where they can be easily updated
Déplacer le CSS de mise en page des balises <style> vers des fichiers CSS externes chargés via des éléments <link>, combiner les styles de plusieurs pages en feuilles de style partagées pour améliorer la mise en cache, utiliser des modules CSS ou des outils de build pour gérer les styles de manière systématique, garder les balises <style> uniquement pour le CSS critique au-dessus de la ligne de flottaison si l'optimisation du temps de premier affichage est nécessaire, documenter tous les styles intégrés restants avec des commentaires expliquant pourquoi le CSS externe n'est pas approprié, et s'assurer que le design adaptatif et les requêtes média sont gérés dans des fichiers externes où ils peuvent être facilement mis à jour
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/head[1]/style[2]

Code Snippet
<style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style>

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
What the issue is:

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance

Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance

Why this is important:

While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.

Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.

Who it affects:

All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files

Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes

How to remediate:
Move layout CSS from <style> tags to external CSS files loaded via <link> elements, combine styles from multiple pages into shared stylesheets to improve caching, use CSS modules or build tools to manage styles systematically, keep <style> tags only for critical above-the-fold CSS if optimizing initial paint time, document any remaining embedded styles with comments explaining why external CSS isn't suitable, and ensure responsive design and media queries are managed in external files where they can be easily updated
Déplacer le CSS de mise en page des balises <style> vers des fichiers CSS externes chargés via des éléments <link>, combiner les styles de plusieurs pages en feuilles de style partagées pour améliorer la mise en cache, utiliser des modules CSS ou des outils de build pour gérer les styles de manière systématique, garder les balises <style> uniquement pour le CSS critique au-dessus de la ligne de flottaison si l'optimisation du temps de premier affichage est nécessaire, documenter tous les styles intégrés restants avec des commentaires expliquant pourquoi le CSS externe n'est pas approprié, et s'assurer que le design adaptatif et les requêtes média sont gérés dans des fichiers externes où ils peuvent être facilement mis à jour
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/head[1]/style[3]

Code Snippet
<style>
.has-text-align-justify{text-align:justify;}
</style>

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
What the issue is:

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance

Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance

Why this is important:

While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.

Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.

Who it affects:

All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files

Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes

How to remediate:
Move layout CSS from <style> tags to external CSS files loaded via <link> elements, combine styles from multiple pages into shared stylesheets to improve caching, use CSS modules or build tools to manage styles systematically, keep <style> tags only for critical above-the-fold CSS if optimizing initial paint time, document any remaining embedded styles with comments explaining why external CSS isn't suitable, and ensure responsive design and media queries are managed in external files where they can be easily updated
Déplacer le CSS de mise en page des balises <style> vers des fichiers CSS externes chargés via des éléments <link>, combiner les styles de plusieurs pages en feuilles de style partagées pour améliorer la mise en cache, utiliser des modules CSS ou des outils de build pour gérer les styles de manière systématique, garder les balises <style> uniquement pour le CSS critique au-dessus de la ligne de flottaison si l'optimisation du temps de premier affichage est nécessaire, documenter tous les styles intégrés restants avec des commentaires expliquant pourquoi le CSS externe n'est pas approprié, et s'assurer que le design adaptatif et les requêtes média sont gérés dans des fichiers externes où ils peuvent être facilement mis à jour
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/head[1]/style[7]

Code Snippet
<style>
:root{--gs-colorone:#2184f9;--gs-colortwo:#e90000;--gs-colorthree:#2adb32;--gs-colorfour:#696cff;--gs-colorfive:#ff9800;}
</style>

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
What the issue is:

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance

Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance

Why this is important:

While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.

Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.

Who it affects:

All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files

Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes

How to remediate:
Move layout CSS from <style> tags to external CSS files loaded via <link> elements, combine styles from multiple pages into shared stylesheets to improve caching, use CSS modules or build tools to manage styles systematically, keep <style> tags only for critical above-the-fold CSS if optimizing initial paint time, document any remaining embedded styles with comments explaining why external CSS isn't suitable, and ensure responsive design and media queries are managed in external files where they can be easily updated
Déplacer le CSS de mise en page des balises <style> vers des fichiers CSS externes chargés via des éléments <link>, combiner les styles de plusieurs pages en feuilles de style partagées pour améliorer la mise en cache, utiliser des modules CSS ou des outils de build pour gérer les styles de manière systématique, garder les balises <style> uniquement pour le CSS critique au-dessus de la ligne de flottaison si l'optimisation du temps de premier affichage est nécessaire, documenter tous les styles intégrés restants avec des commentaires expliquant pourquoi le CSS externe n'est pas approprié, et s'assurer que le design adaptatif et les requêtes média sont gérés dans des fichiers externes où ils peuvent être facilement mis à jour
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/head[1]/style[10]

Code Snippet
<style>
:root { --font-headings: unset; --font-base: unset; --font-headings-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; --font-base-default: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica N...</style>

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
What the issue is:

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance

Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance

Why this is important:

While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.

Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.

Who it affects:

All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files

Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes

How to remediate:
Move layout CSS from <style> tags to external CSS files loaded via <link> elements, combine styles from multiple pages into shared stylesheets to improve caching, use CSS modules or build tools to manage styles systematically, keep <style> tags only for critical above-the-fold CSS if optimizing initial paint time, document any remaining embedded styles with comments explaining why external CSS isn't suitable, and ensure responsive design and media queries are managed in external files where they can be easily updated
Déplacer le CSS de mise en page des balises <style> vers des fichiers CSS externes chargés via des éléments <link>, combiner les styles de plusieurs pages en feuilles de style partagées pour améliorer la mise en cache, utiliser des modules CSS ou des outils de build pour gérer les styles de manière systématique, garder les balises <style> uniquement pour le CSS critique au-dessus de la ligne de flottaison si l'optimisation du temps de premier affichage est nécessaire, documenter tous les styles intégrés restants avec des commentaires expliquant pourquoi le CSS externe n'est pas approprié, et s'assurer que le design adaptatif et les requêtes média sont gérés dans des fichiers externes où ils peuvent être facilement mis à jour
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/head[1]/style[11]

Code Snippet
<style>img#wpstats{display:none}</style>

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance
About this issue:
What the issue is:

Style tags in HTML document define layout properties, which should preferably be in external CSS files for better maintainability and performance

Les balises style dans le document HTML définissent des propriétés de mise en page qui devraient de préférence être dans des fichiers CSS externes pour une meilleure maintenabilité et performance

Why this is important:

While layout CSS in <style> tags is less problematic than inline styles, using external CSS files provides better caching, allows CSS to be shared across pages, makes maintenance easier, enables better testing, and improves page load performance. Embedded <style> blocks increase HTML file size, prevent browser caching of styles, make it harder to implement site-wide design changes, and can create flash of unstyled content issues. External CSS also makes it easier to implement responsive design and media queries consistently.

Bien que le CSS de mise en page dans les balises <style> soit moins problématique que les styles en ligne, l'utilisation de fichiers CSS externes offre une meilleure mise en cache, permet au CSS d'être partagé entre les pages, facilite la maintenance, permet de meilleurs tests et améliore les performances de chargement des pages. Les blocs <style> intégrés augmentent la taille du fichier HTML, empêchent la mise en cache des styles par le navigateur, rendent plus difficile l'implémentation de changements de design à l'échelle du site et peuvent créer des problèmes d'affichage de contenu non stylé. Le CSS externe facilite également l'implémentation cohérente du design adaptatif et des requêtes média.

Who it affects:

All users benefit from faster page loads through CSS caching, users on slow connections who download unnecessary CSS with every page, users who zoom or need responsive layouts that should be managed centrally, developers maintaining scattered style blocks across multiple pages, and users whose custom stylesheets work more predictably when site styles are in external files

Tous les utilisateurs bénéficient de chargements de pages plus rapides grâce à la mise en cache CSS, les utilisateurs avec des connexions lentes qui téléchargent du CSS inutile à chaque page, les utilisateurs qui zooment ou ont besoin de mises en page adaptatives qui devraient être gérées de manière centralisée, les développeurs maintenant des blocs de style dispersés sur plusieurs pages, et les utilisateurs dont les feuilles de style personnalisées fonctionnent de manière plus prévisible lorsque les styles du site sont dans des fichiers externes

How to remediate:
Move layout CSS from <style> tags to external CSS files loaded via <link> elements, combine styles from multiple pages into shared stylesheets to improve caching, use CSS modules or build tools to manage styles systematically, keep <style> tags only for critical above-the-fold CSS if optimizing initial paint time, document any remaining embedded styles with comments explaining why external CSS isn't suitable, and ensure responsive design and media queries are managed in external files where they can be easily updated
Déplacer le CSS de mise en page des balises <style> vers des fichiers CSS externes chargés via des éléments <link>, combiner les styles de plusieurs pages en feuilles de style partagées pour améliorer la mise en cache, utiliser des modules CSS ou des outils de build pour gérer les styles de manière systématique, garder les balises <style> uniquement pour le CSS critique au-dessus de la ligne de flottaison si l'optimisation du temps de premier affichage est nécessaire, documenter tous les styles intégrés restants avec des commentaires expliquant pourquoi le CSS externe n'est pas approprié, et s'assurer que le design adaptatif et les requêtes média sont gérés dans des fichiers externes où ils peuvent être facilement mis à jour
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 8 8

Touchpoint Styles Styles

Impact Low Faible

Location /html[1]/body[1]/style[2]

Code Snippet
<style>
.wp-container-core-columns-is-layout-9d6595d7{flex-wrap:nowrap;}.wp-container-core-buttons-is-layout-16018d1d{justify-content:center;}
</style>
info (1)
Headings Titres

Heading is %(length)s characters long, approaching the recommended limit of %(limit)s characters Le titre fait %(length)s caractères, approchant la limite recommandée de %(limit)s caractères
About this issue:
What the issue is:

Heading is %(length)s characters long, approaching the recommended limit of %(limit)s characters

Le titre fait %(length)s caractères, approchant la limite recommandée de %(limit)s caractères

Why this is important:

Long headings (currently %(length)s characters) are more difficult to scan and understand quickly. While not yet exceeding the %(limit)s character limit, shorter headings improve readability and comprehension.

Les titres longs (actuellement %(length)s caractères) sont plus difficiles à parcourir et à comprendre rapidement. Bien qu'ils ne dépassent pas encore la limite de %(limit)s caractères, des titres plus courts améliorent la lisibilité et la compréhension.

Who it affects:

Users with cognitive disabilities who benefit from concise headings, users scanning content quickly, screen reader users who must listen to full heading text.

Utilisateurs avec des handicaps cognitifs qui bénéficient de titres concis, utilisateurs parcourant le contenu rapidement, utilisateurs de lecteurs d'écran qui doivent écouter le texte complet du titre.

How to remediate:
Consider shortening the heading from %(length)s to under %(nearLimit)s characters for optimal readability while maintaining clarity. Current text: "%(text)s"
Envisagez de raccourcir le titre de %(length)s à moins de %(nearLimit)s caractères pour une lisibilité optimale tout en maintenant la clarté. Texte actuel : "%(text)s"
Relevant test criteria:
WCAG Success Criteria:
  • 2 2
  • . .
  • 4 4
  • . .
  • 6 6

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/main[1]/div[1]/div[2]/div[1]/div[1]/div[1]/h2[1]

Code Snippet
<h2 id="gspb_heading-id-gsbp-7455257e-60db" class="gspb_heading gspb_heading-id-gsbp-7455257e-60db "><strong><strong><strong><strong><strong>Co-design products with the end user in mind</strong></stro
Discovery (53)
Event Handling Gestion des événements

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[1]

Code Snippet
<script type="text/javascript" async="" charset="utf-8" src="https://www.gstatic.com/recaptcha/releases/cLm1zuaUXPLFw7nzKiQTH1dX/recaptcha__en.js" crossorigin="anonymous" integrity="sha384-gUsoa0ra1Yy

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[2]

Code Snippet
<script type="text/javascript">
		var contactform = [];
		var checkIfCalled = true;
		var renderGoogleInvisibleRecaptchaFront = function() {
			// prevent form submit from enter key
			jQuery("input[n

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[3]

Code Snippet
<script src="https://www.google.com/recaptcha/api.js?onload=renderGoogleInvisibleRecaptchaFront&amp;render=explicit" async="" defer=""></script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[4]

Code Snippet
<script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","@id":"https://cnib-accesslabs.ca/become-a-tester/","url":"https://cnib-acce

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[5]

Code Snippet
<script>
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/16.0.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/16.0.1\/svg\/","svgExt":".svg","s

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[6]

Code Snippet
<script id="wpml-cookie-js-extra">
var wpml_cookies = {"wp-wpml_current_language":{"value":"en","expires":1,"path":"\/"}};
var wpml_cookies = {"wp-wpml_current_language":{"value":"en","expires":1,"pat

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[7]

Code Snippet
<script data-handles="wpml-cookie" type="text/javascript" src="https://cnib-accesslabs.ca/wp-content/plugins/sitepress-multilingual-cms/res/js/cookies/language-cookie.js?m=1699431499"></script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[8]

Code Snippet
<script id="jetpack-mu-wpcom-settings-js-before">
var JETPACK_MU_WPCOM_SETTINGS = {"assetsUrl":"https:\/\/cnib-accesslabs.ca\/wp-content\/mu-plugins\/wpcomsh\/jetpack_vendor\/automattic\/jetpack-mu-wp

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[9]

Code Snippet
<script src="https://cnib-accesslabs.ca/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[10]

Code Snippet
<script data-handles="jquery-migrate,cf7_invisible_recaptcha_functions" type="text/javascript" src="https://cnib-accesslabs.ca/_static/??wp-includes/js/jquery/jquery-migrate.min.js,wp-content/plugins/

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[11]

Code Snippet
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-DHQX09YM5V"></script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[12]

Code Snippet
<script>
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments);}
			gtag('js', new Date());
			gtag('config', 'G-DHQX09YM5V');
		</script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[13]

Code Snippet
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-DHQX09YM5V"></script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[14]

Code Snippet
<script>
			window.dataLayer = window.dataLayer || [];
			function gtag() { dataLayer.push( arguments ); }
			gtag( 'js', new Date() );
			gtag( 'config', "G-DHQX09YM5V" );
					</script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[15]

Code Snippet
<script type="text/javascript">/////////////////////////////////////////////////////////////
// Calculation of the accessibe name
/////////////////////////////////////////////////////////////

/**
 *

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[16]

Code Snippet
<script type="text/javascript">const ariaWidgetRoles = [

    "button",
    "checkbox",
    "gridcell",
    "link",
    "menuitem",
    "menuitemcheckbox",
    "menuitemradio",
    "option",
    "prog

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[17]

Code Snippet
<script type="text/javascript">const cssColors = {
    "aliceblue": "#f0f8ff",
    "antiquewhite": "#faebd7",
    "aqua": "#00ffff",
    "aquamarine": "#7fffd4",
    "azure": "#f0ffff",
    "beige": "

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[18]

Code Snippet
<script type="text/javascript">// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[19]

Code Snippet
<script type="text/javascript">const ERR = 0;
const WARN = 1;

class A11yCodes {
    static Headings = {
        HEADINGS_DONT_START_WITH_H1: { code:ERR, txt:"Heading levels do not start with an H1"},

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[20]

Code Snippet
<script type="text/javascript">/**
 * Helper functions for pass tracking and applicability
 * To be included in all test files
 */

/**
 * Create a not applicable result for a test
 * @param {string}

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[21]

Code Snippet
<script type="text/javascript">function pageTitleScrape() {
    let errorList = [];
    let passList = [];
    let checks = [];

    // Get title length limit from config, default to 60
    const titl

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/head[1]/script[22]

Code Snippet
<script type="text/javascript">function pdfScrape() {

    let pdfList = [];

    let elements = document.querySelectorAll("a[href]");
    elements.forEach(element=>{
        const href = element.getA

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/body[1]/script[1]

Code Snippet
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/body[1]/script[2]

Code Snippet
<script defer="" src="https://s0.wp.com/wp-content/js/bilmur.min.js?m=202544"></script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/body[1]/script[3]

Code Snippet
<script data-handles="wp-hooks" type="text/javascript" src="https://cnib-accesslabs.ca/wp-includes/js/dist/hooks.min.js?m=1727673091"></script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/body[1]/script[4]

Code Snippet
<script src="https://cnib-accesslabs.ca/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/body[1]/script[5]

Code Snippet
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/body[1]/script[6]

Code Snippet
<script data-handles="swv" type="text/javascript" src="https://cnib-accesslabs.ca/wp-content/plugins/contact-form-7/includes/swv/js/index.js?m=1761765395"></script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/body[1]/script[7]

Code Snippet
<script id="contact-form-7-js-before">
var wpcf7 = {
    "api": {
        "root": "https:\/\/cnib-accesslabs.ca\/wp-json\/",
        "namespace": "contact-form-7\/v1"
    },
    "cached": 1
};
</scrip

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/body[1]/script[8]

Code Snippet
<script src="https://cnib-accesslabs.ca/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.3" id="contact-form-7-js"></script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/body[1]/script[9]

Code Snippet
<script data-handles="seedlet-primary-navigation-script,jcookie-js,default-js" type="text/javascript" src="https://cnib-accesslabs.ca/_static/??-eJyNy0EOgkAMRuELCVUSTGZhPEsdfrQjM4NtkXB7ce3G7cv71rmJtTi

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/body[1]/script[10]

Code Snippet
<script id="jetpack-stats-js-before">
_stq = window._stq || [];
_stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"211029720\",\"post\":\"2563\",\"tz\":\"-4\",\"srv\":\"cnib-accesslabs.ca\",\"h

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/body[1]/script[11]

Code Snippet
<script src="https://stats.wp.com/e-202544.js" id="jetpack-stats-js" defer="" data-wp-strategy="defer"></script>

JavaScript detected on page JavaScript détecté sur la page
About this issue:
What the issue is:

JavaScript detected on page

JavaScript détecté sur la page

Why this is important:

Functionality should work without JavaScript

La fonctionnalité devrait fonctionner sans JavaScript

Who it affects:

Users with JavaScript disabled

Utilisateurs avec JavaScript désactivé

How to remediate:
Ensure progressive enhancement
Assurer l'amélioration progressive

Touchpoint Event Handling Gestion des événements

Impact Low Faible

Location /html[1]/body[1]/script[12]

Code Snippet
<script>
	/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]
Fonts Polices

Font '%(fontName)s' is used at %(sizeCount)s %(sizeCount_singular_size)s on this page: %(fontSizes_list)s La police '%(fontName)s' est utilisée à %(sizeCount)s %(sizeCount_singular_size)s sur cette page : %(fontSizes_list)s
About this issue:
What the issue is:

Font '%(fontName)s' is used at %(sizeCount)s %(sizeCount_singular_size)s on this page: %(fontSizes_list)s

La police '%(fontName)s' est utilisée à %(sizeCount)s %(sizeCount_singular_size)s sur cette page : %(fontSizes_list)s

Why this is important:

Tracking font usage helps identify typography choices that may affect readability. While not inherently an accessibility issue, certain fonts can be harder to read for users with dyslexia, low vision, or reading disabilities. This discovery item documents which fonts are in use and at what sizes so they can be evaluated for legibility, character distinction, and overall readability as part of a comprehensive accessibility review.

Le suivi de l'utilisation des polices aide à identifier les choix typographiques qui peuvent affecter la lisibilité. Bien que ce ne soit pas intrinsèquement un problème d'accessibilité, certaines polices peuvent être plus difficiles à lire pour les utilisateurs dyslexiques, malvoyants ou ayant des troubles de la lecture. Cet élément de découverte documente quelles polices sont utilisées et à quelles tailles afin qu'elles puissent être évaluées pour la lisibilité, la distinction des caractères et la lisibilité globale dans le cadre d'une révision d'accessibilité complète.

Who it affects:

This information helps accessibility auditors and developers understand the typography landscape of the page, particularly relevant for users with dyslexia who benefit from clear sans-serif fonts, users with low vision who need good character distinction, and users with reading disabilities who benefit from consistent, readable typefaces

Cette information aide les auditeurs d'accessibilité et les développeurs à comprendre le paysage typographique de la page, particulièrement pertinent pour les utilisateurs dyslexiques qui bénéficient de polices sans-serif claires, les utilisateurs malvoyants qui ont besoin d'une bonne distinction des caractères, et les utilisateurs ayant des troubles de la lecture qui bénéficient de polices cohérentes et lisibles

How to remediate:
No action required - this is informational only. For accessibility best practices, consider using fonts with clear character distinction (avoiding ambiguous characters like I/l/1), adequate spacing between letters, and good readability at various sizes. Popular accessible fonts include Arial, Verdana, Tahoma, and specialized dyslexia-friendly fonts like OpenDyslexic. Document your font choices and test readability with actual users when possible.
Aucune action requise - ceci est informatif uniquement. Pour les bonnes pratiques d'accessibilité, considérez l'utilisation de polices avec une distinction claire des caractères (évitant les caractères ambigus comme I/l/1), un espacement adéquat entre les lettres, et une bonne lisibilité à diverses tailles. Les polices accessibles populaires incluent Arial, Verdana, Tahoma, et des polices spécialisées pour la dyslexie comme OpenDyslexic. Documentez vos choix de polices et testez la lisibilité avec de vrais utilisateurs quand c'est possible.

Touchpoint Fonts Polices

Impact Low Faible

Location /html[1]

Code Snippet
<meta>Font: Stag Sans</meta>
Headings Titres

Heading element has an ID attribute that may be used for in-page navigation L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
About this issue:
What the issue is:

Heading element has an ID attribute that may be used for in-page navigation

L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page

Why this is important:

Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.

Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.

Who it affects:

All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.

Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.

How to remediate:
Verify the heading ID is referenced by navigation links, ensure the ID is descriptive and stable, check that the heading text provides clear navigation context.
Vérifier que l'ID du titre est référencé par des liens de navigation, s'assurer que l'ID est descriptif et stable, vérifier que le texte du titre fournit un contexte de navigation clair.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/main[1]/div[1]/div[1]/div[1]/div[1]/div[1]/h1[1]

Code Snippet
<h1 id="gspb_heading-id-gsbp-9adcb282-5f25" class="gspb_heading gspb_heading-id-gsbp-9adcb282-5f25 "><strong><strong>Become an Accessibility Tester</strong></strong></h1>

Heading element has an ID attribute that may be used for in-page navigation L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
About this issue:
What the issue is:

Heading element has an ID attribute that may be used for in-page navigation

L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page

Why this is important:

Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.

Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.

Who it affects:

All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.

Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.

How to remediate:
Verify the heading ID is referenced by navigation links, ensure the ID is descriptive and stable, check that the heading text provides clear navigation context.
Vérifier que l'ID du titre est référencé par des liens de navigation, s'assurer que l'ID est descriptif et stable, vérifier que le texte du titre fournit un contexte de navigation clair.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/main[1]/div[1]/div[2]/div[1]/div[1]/div[1]/h2[1]

Code Snippet
<h2 id="gspb_heading-id-gsbp-7455257e-60db" class="gspb_heading gspb_heading-id-gsbp-7455257e-60db "><strong><strong><strong><strong><strong>Co-design products with the end user in mind</strong></stro

Heading element has an ID attribute that may be used for in-page navigation L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
About this issue:
What the issue is:

Heading element has an ID attribute that may be used for in-page navigation

L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page

Why this is important:

Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.

Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.

Who it affects:

All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.

Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.

How to remediate:
Verify the heading ID is referenced by navigation links, ensure the ID is descriptive and stable, check that the heading text provides clear navigation context.
Vérifier que l'ID du titre est référencé par des liens de navigation, s'assurer que l'ID est descriptif et stable, vérifier que le texte du titre fournit un contexte de navigation clair.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/main[1]/div[1]/div[2]/div[2]/div[1]/div[2]/h2[1]

Code Snippet
<h2 id="gspb_heading-id-gsbp-7a891281-aa4b" class="gspb_heading gspb_heading-id-gsbp-7a891281-aa4b "><strong><strong><strong><strong><strong>Make a major impact for accessibility</strong></strong></st

Heading element has an ID attribute that may be used for in-page navigation L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
About this issue:
What the issue is:

Heading element has an ID attribute that may be used for in-page navigation

L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page

Why this is important:

Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.

Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.

Who it affects:

All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.

Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.

How to remediate:
Verify the heading ID is referenced by navigation links, ensure the ID is descriptive and stable, check that the heading text provides clear navigation context.
Vérifier que l'ID du titre est référencé par des liens de navigation, s'assurer que l'ID est descriptif et stable, vérifier que le texte du titre fournit un contexte de navigation clair.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/main[1]/div[1]/div[3]/h2[1]

Code Snippet
<h2 id="gspb_heading-id-gsbp-9f5e1421-b5fb" class="gspb_heading gspb_heading-id-gsbp-9f5e1421-b5fb "><strong><strong>Join our growing tester team.</strong></strong></h2>

Heading element has an ID attribute that may be used for in-page navigation L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
About this issue:
What the issue is:

Heading element has an ID attribute that may be used for in-page navigation

L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page

Why this is important:

Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.

Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.

Who it affects:

All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.

Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.

How to remediate:
Verify the heading ID is referenced by navigation links, ensure the ID is descriptive and stable, check that the heading text provides clear navigation context.
Vérifier que l'ID du titre est référencé par des liens de navigation, s'assurer que l'ID est descriptif et stable, vérifier que le texte du titre fournit un contexte de navigation clair.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[1]/div[1]/div[1]/h2[1]

Code Snippet
<h2 class="wp-block-heading has-h-3-font-size" id="subscribe-to-our-newsletter"><strong>Subscribe to our newsletter</strong></h2>

Heading element has an ID attribute that may be used for in-page navigation L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
About this issue:
What the issue is:

Heading element has an ID attribute that may be used for in-page navigation

L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page

Why this is important:

Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.

Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.

Who it affects:

All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.

Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.

How to remediate:
Verify the heading ID is referenced by navigation links, ensure the ID is descriptive and stable, check that the heading text provides clear navigation context.
Vérifier que l'ID du titre est référencé par des liens de navigation, s'assurer que l'ID est descriptif et stable, vérifier que le texte du titre fournit un contexte de navigation clair.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/h2[1]

Code Snippet
<h2 class="screen-reader-text">Footer</h2>

Heading element has an ID attribute that may be used for in-page navigation L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
About this issue:
What the issue is:

Heading element has an ID attribute that may be used for in-page navigation

L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page

Why this is important:

Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.

Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.

Who it affects:

All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.

Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.

How to remediate:
Verify the heading ID is referenced by navigation links, ensure the ID is descriptive and stable, check that the heading text provides clear navigation context.
Vérifier que l'ID du titre est référencé par des liens de navigation, s'assurer que l'ID est descriptif et stable, vérifier que le texte du titre fournit un contexte de navigation clair.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[1]/h3[1]

Code Snippet
<h3 class="has-h-4-font-size english-only" id="have-a-questions-contact-us"><strong>Have any questions? Contact Us!</strong></h3>

Heading element has an ID attribute that may be used for in-page navigation L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
About this issue:
What the issue is:

Heading element has an ID attribute that may be used for in-page navigation

L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page

Why this is important:

Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.

Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.

Who it affects:

All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.

Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.

How to remediate:
Verify the heading ID is referenced by navigation links, ensure the ID is descriptive and stable, check that the heading text provides clear navigation context.
Vérifier que l'ID du titre est référencé par des liens de navigation, s'assurer que l'ID est descriptif et stable, vérifier que le texte du titre fournit un contexte de navigation clair.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[2]/h3[1]

Code Snippet
<h3 class="has-h-4-font-size french-only" id="have-a-questions-contact-us"><strong>Vous avez des questions? Contactez nous!</strong></h3>

Heading element has an ID attribute that may be used for in-page navigation L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
About this issue:
What the issue is:

Heading element has an ID attribute that may be used for in-page navigation

L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page

Why this is important:

Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.

Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.

Who it affects:

All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.

Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.

How to remediate:
Verify the heading ID is referenced by navigation links, ensure the ID is descriptive and stable, check that the heading text provides clear navigation context.
Vérifier que l'ID du titre est référencé par des liens de navigation, s'assurer que l'ID est descriptif et stable, vérifier que le texte du titre fournit un contexte de navigation clair.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[7]/h3[1]

Code Snippet
<h3 id="we-are-proud-partners-of" class="has-h-4-font-size english-only"><strong>Our Partner Organizations</strong></h3>

Heading element has an ID attribute that may be used for in-page navigation L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page
About this issue:
What the issue is:

Heading element has an ID attribute that may be used for in-page navigation

L'élément de titre possède un attribut ID qui peut être utilisé pour la navigation dans la page

Why this is important:

Headings with IDs are often link targets for navigation, requiring verification that they work correctly and provide meaningful navigation points.

Les titres avec des ID sont souvent des cibles de liens pour la navigation, nécessitant une vérification qu'ils fonctionnent correctement et fournissent des points de navigation significatifs.

Who it affects:

All users who use in-page navigation links, screen reader users who navigate by headings, keyboard users who follow fragment links.

Tous les utilisateurs qui utilisent des liens de navigation dans la page, utilisateurs de lecteurs d'écran qui naviguent par titres, utilisateurs de clavier qui suivent les liens de fragment.

How to remediate:
Verify the heading ID is referenced by navigation links, ensure the ID is descriptive and stable, check that the heading text provides clear navigation context.
Vérifier que l'ID du titre est référencé par des liens de navigation, s'assurer que l'ID est descriptif et stable, vérifier que le texte du titre fournit un contexte de navigation clair.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 3 3
  • . .
  • 1 1

Touchpoint Headings Titres

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[2]/div[8]/h3[1]

Code Snippet
<h3 id="we-are-proud-partners-of" class="has-h-4-font-size french-only"><strong>Nous sommes fiers d'être partenaires de</strong></h3>
Images Images

Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité
About this issue:
What the issue is:

Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity

Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité

Why this is important:

SVG elements serve diverse purposes from simple icons to complex interactive visualizations, each requiring different accessibility approaches. A decorative border needs different treatment than a data chart, which differs from an interactive map or scientific simulation. Automated tools cannot determine SVG purpose, whether it's decorative or informative, static or interactive, or if existing accessibility features adequately support user needs.

Les éléments SVG servent des objectifs divers, des icônes simples aux visualisations interactives complexes, chacun nécessitant des approches d'accessibilité différentes. Une bordure décorative nécessite un traitement différent d'un graphique de données, qui diffère d'une carte interactive ou d'une simulation scientifique. Les outils automatisés ne peuvent pas déterminer l'objectif du SVG, s'il est décoratif ou informatif, statique ou interactif, ou si les fonctionnalités d'accessibilité existantes soutiennent adéquatement les besoins des utilisateurs.

Who it affects:

Blind and low vision users using screen readers who need text alternatives for graphics or keyboard access to interactive elements, users with motor disabilities who require keyboard navigation for interactive SVG controls, users with cognitive disabilities who benefit from clear labeling and predictable interaction patterns, and users of various assistive technologies that may interpret SVG content differently

Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin de textes alternatifs pour les graphiques ou d'un accès clavier aux éléments interactifs, utilisateurs avec des handicaps moteurs qui nécessitent une navigation au clavier pour les contrôles SVG interactifs, utilisateurs avec des handicaps cognitifs qui bénéficient d'un étiquetage clair et de modèles d'interaction prévisibles, et utilisateurs de diverses technologies d'assistance qui peuvent interpréter le contenu SVG différemment

How to remediate:
Evaluate the SVG's purpose and complexity - for simple images add <title> with aria-labelledby or role="img" with aria-label, for decorative graphics use aria-hidden="true", for data visualizations provide <title> and <desc> plus consider adjacent detailed text alternatives, for interactive content ensure all controls are keyboard accessible with proper ARIA labels and focus management, for complex simulations provide instructions and state changes announcements, and test with screen readers to verify the experience matches visual functionality
Évaluez l'objectif et la complexité du SVG - pour les images simples, ajoutez <title> avec aria-labelledby ou role="img" avec aria-label, pour les graphiques décoratifs utilisez aria-hidden="true", pour les visualisations de données fournissez <title> et <desc> plus considérez des textes alternatifs détaillés adjacents, pour le contenu interactif assurez-vous que tous les contrôles sont accessibles au clavier avec des étiquettes ARIA appropriées et une gestion du focus, pour les simulations complexes fournissez des instructions et des annonces de changements d'état, et testez avec des lecteurs d'écran pour vérifier que l'expérience correspond à la fonctionnalité visuelle
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Images Images

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[1]/a[1]/svg[1]

Code Snippet
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H

Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité
About this issue:
What the issue is:

Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity

Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité

Why this is important:

SVG elements serve diverse purposes from simple icons to complex interactive visualizations, each requiring different accessibility approaches. A decorative border needs different treatment than a data chart, which differs from an interactive map or scientific simulation. Automated tools cannot determine SVG purpose, whether it's decorative or informative, static or interactive, or if existing accessibility features adequately support user needs.

Les éléments SVG servent des objectifs divers, des icônes simples aux visualisations interactives complexes, chacun nécessitant des approches d'accessibilité différentes. Une bordure décorative nécessite un traitement différent d'un graphique de données, qui diffère d'une carte interactive ou d'une simulation scientifique. Les outils automatisés ne peuvent pas déterminer l'objectif du SVG, s'il est décoratif ou informatif, statique ou interactif, ou si les fonctionnalités d'accessibilité existantes soutiennent adéquatement les besoins des utilisateurs.

Who it affects:

Blind and low vision users using screen readers who need text alternatives for graphics or keyboard access to interactive elements, users with motor disabilities who require keyboard navigation for interactive SVG controls, users with cognitive disabilities who benefit from clear labeling and predictable interaction patterns, and users of various assistive technologies that may interpret SVG content differently

Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin de textes alternatifs pour les graphiques ou d'un accès clavier aux éléments interactifs, utilisateurs avec des handicaps moteurs qui nécessitent une navigation au clavier pour les contrôles SVG interactifs, utilisateurs avec des handicaps cognitifs qui bénéficient d'un étiquetage clair et de modèles d'interaction prévisibles, et utilisateurs de diverses technologies d'assistance qui peuvent interpréter le contenu SVG différemment

How to remediate:
Evaluate the SVG's purpose and complexity - for simple images add <title> with aria-labelledby or role="img" with aria-label, for decorative graphics use aria-hidden="true", for data visualizations provide <title> and <desc> plus consider adjacent detailed text alternatives, for interactive content ensure all controls are keyboard accessible with proper ARIA labels and focus management, for complex simulations provide instructions and state changes announcements, and test with screen readers to verify the experience matches visual functionality
Évaluez l'objectif et la complexité du SVG - pour les images simples, ajoutez <title> avec aria-labelledby ou role="img" avec aria-label, pour les graphiques décoratifs utilisez aria-hidden="true", pour les visualisations de données fournissez <title> et <desc> plus considérez des textes alternatifs détaillés adjacents, pour le contenu interactif assurez-vous que tous les contrôles sont accessibles au clavier avec des étiquettes ARIA appropriées et une gestion du focus, pour les simulations complexes fournissez des instructions et des annonces de changements d'état, et testez avec des lecteurs d'écran pour vérifier que l'expérience correspond à la fonctionnalité visuelle
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Images Images

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[2]/a[1]/svg[1]

Code Snippet
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.7

Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité
About this issue:
What the issue is:

Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity

Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité

Why this is important:

SVG elements serve diverse purposes from simple icons to complex interactive visualizations, each requiring different accessibility approaches. A decorative border needs different treatment than a data chart, which differs from an interactive map or scientific simulation. Automated tools cannot determine SVG purpose, whether it's decorative or informative, static or interactive, or if existing accessibility features adequately support user needs.

Les éléments SVG servent des objectifs divers, des icônes simples aux visualisations interactives complexes, chacun nécessitant des approches d'accessibilité différentes. Une bordure décorative nécessite un traitement différent d'un graphique de données, qui diffère d'une carte interactive ou d'une simulation scientifique. Les outils automatisés ne peuvent pas déterminer l'objectif du SVG, s'il est décoratif ou informatif, statique ou interactif, ou si les fonctionnalités d'accessibilité existantes soutiennent adéquatement les besoins des utilisateurs.

Who it affects:

Blind and low vision users using screen readers who need text alternatives for graphics or keyboard access to interactive elements, users with motor disabilities who require keyboard navigation for interactive SVG controls, users with cognitive disabilities who benefit from clear labeling and predictable interaction patterns, and users of various assistive technologies that may interpret SVG content differently

Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin de textes alternatifs pour les graphiques ou d'un accès clavier aux éléments interactifs, utilisateurs avec des handicaps moteurs qui nécessitent une navigation au clavier pour les contrôles SVG interactifs, utilisateurs avec des handicaps cognitifs qui bénéficient d'un étiquetage clair et de modèles d'interaction prévisibles, et utilisateurs de diverses technologies d'assistance qui peuvent interpréter le contenu SVG différemment

How to remediate:
Evaluate the SVG's purpose and complexity - for simple images add <title> with aria-labelledby or role="img" with aria-label, for decorative graphics use aria-hidden="true", for data visualizations provide <title> and <desc> plus consider adjacent detailed text alternatives, for interactive content ensure all controls are keyboard accessible with proper ARIA labels and focus management, for complex simulations provide instructions and state changes announcements, and test with screen readers to verify the experience matches visual functionality
Évaluez l'objectif et la complexité du SVG - pour les images simples, ajoutez <title> avec aria-labelledby ou role="img" avec aria-label, pour les graphiques décoratifs utilisez aria-hidden="true", pour les visualisations de données fournissez <title> et <desc> plus considérez des textes alternatifs détaillés adjacents, pour le contenu interactif assurez-vous que tous les contrôles sont accessibles au clavier avec des étiquettes ARIA appropriées et une gestion du focus, pour les simulations complexes fournissez des instructions et des annonces de changements d'état, et testez avec des lecteurs d'écran pour vérifier que l'expérience correspond à la fonctionnalité visuelle
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Images Images

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[3]/a[1]/svg[1]

Code Snippet
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path d="M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-

Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité
About this issue:
What the issue is:

Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity

Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité

Why this is important:

SVG elements serve diverse purposes from simple icons to complex interactive visualizations, each requiring different accessibility approaches. A decorative border needs different treatment than a data chart, which differs from an interactive map or scientific simulation. Automated tools cannot determine SVG purpose, whether it's decorative or informative, static or interactive, or if existing accessibility features adequately support user needs.

Les éléments SVG servent des objectifs divers, des icônes simples aux visualisations interactives complexes, chacun nécessitant des approches d'accessibilité différentes. Une bordure décorative nécessite un traitement différent d'un graphique de données, qui diffère d'une carte interactive ou d'une simulation scientifique. Les outils automatisés ne peuvent pas déterminer l'objectif du SVG, s'il est décoratif ou informatif, statique ou interactif, ou si les fonctionnalités d'accessibilité existantes soutiennent adéquatement les besoins des utilisateurs.

Who it affects:

Blind and low vision users using screen readers who need text alternatives for graphics or keyboard access to interactive elements, users with motor disabilities who require keyboard navigation for interactive SVG controls, users with cognitive disabilities who benefit from clear labeling and predictable interaction patterns, and users of various assistive technologies that may interpret SVG content differently

Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin de textes alternatifs pour les graphiques ou d'un accès clavier aux éléments interactifs, utilisateurs avec des handicaps moteurs qui nécessitent une navigation au clavier pour les contrôles SVG interactifs, utilisateurs avec des handicaps cognitifs qui bénéficient d'un étiquetage clair et de modèles d'interaction prévisibles, et utilisateurs de diverses technologies d'assistance qui peuvent interpréter le contenu SVG différemment

How to remediate:
Evaluate the SVG's purpose and complexity - for simple images add <title> with aria-labelledby or role="img" with aria-label, for decorative graphics use aria-hidden="true", for data visualizations provide <title> and <desc> plus consider adjacent detailed text alternatives, for interactive content ensure all controls are keyboard accessible with proper ARIA labels and focus management, for complex simulations provide instructions and state changes announcements, and test with screen readers to verify the experience matches visual functionality
Évaluez l'objectif et la complexité du SVG - pour les images simples, ajoutez <title> avec aria-labelledby ou role="img" avec aria-label, pour les graphiques décoratifs utilisez aria-hidden="true", pour les visualisations de données fournissez <title> et <desc> plus considérez des textes alternatifs détaillés adjacents, pour le contenu interactif assurez-vous que tous les contrôles sont accessibles au clavier avec des étiquettes ARIA appropriées et une gestion du focus, pour les simulations complexes fournissez des instructions et des annonces de changements d'état, et testez avec des lecteurs d'écran pour vérifier que l'expérience correspond à la fonctionnalité visuelle
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Images Images

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[4]/a[1]/svg[1]

Code Snippet
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path d="M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.87

Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité
About this issue:
What the issue is:

Inline SVG element detected that requires manual review to determine appropriate accessibility implementation based on its purpose and complexity

Élément SVG intégré détecté nécessitant une révision manuelle pour déterminer l'implémentation d'accessibilité appropriée selon son objectif et sa complexité

Why this is important:

SVG elements serve diverse purposes from simple icons to complex interactive visualizations, each requiring different accessibility approaches. A decorative border needs different treatment than a data chart, which differs from an interactive map or scientific simulation. Automated tools cannot determine SVG purpose, whether it's decorative or informative, static or interactive, or if existing accessibility features adequately support user needs.

Les éléments SVG servent des objectifs divers, des icônes simples aux visualisations interactives complexes, chacun nécessitant des approches d'accessibilité différentes. Une bordure décorative nécessite un traitement différent d'un graphique de données, qui diffère d'une carte interactive ou d'une simulation scientifique. Les outils automatisés ne peuvent pas déterminer l'objectif du SVG, s'il est décoratif ou informatif, statique ou interactif, ou si les fonctionnalités d'accessibilité existantes soutiennent adéquatement les besoins des utilisateurs.

Who it affects:

Blind and low vision users using screen readers who need text alternatives for graphics or keyboard access to interactive elements, users with motor disabilities who require keyboard navigation for interactive SVG controls, users with cognitive disabilities who benefit from clear labeling and predictable interaction patterns, and users of various assistive technologies that may interpret SVG content differently

Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui ont besoin de textes alternatifs pour les graphiques ou d'un accès clavier aux éléments interactifs, utilisateurs avec des handicaps moteurs qui nécessitent une navigation au clavier pour les contrôles SVG interactifs, utilisateurs avec des handicaps cognitifs qui bénéficient d'un étiquetage clair et de modèles d'interaction prévisibles, et utilisateurs de diverses technologies d'assistance qui peuvent interpréter le contenu SVG différemment

How to remediate:
Evaluate the SVG's purpose and complexity - for simple images add <title> with aria-labelledby or role="img" with aria-label, for decorative graphics use aria-hidden="true", for data visualizations provide <title> and <desc> plus consider adjacent detailed text alternatives, for interactive content ensure all controls are keyboard accessible with proper ARIA labels and focus management, for complex simulations provide instructions and state changes announcements, and test with screen readers to verify the experience matches visual functionality
Évaluez l'objectif et la complexité du SVG - pour les images simples, ajoutez <title> avec aria-labelledby ou role="img" avec aria-label, pour les graphiques décoratifs utilisez aria-hidden="true", pour les visualisations de données fournissez <title> et <desc> plus considérez des textes alternatifs détaillés adjacents, pour le contenu interactif assurez-vous que tous les contrôles sont accessibles au clavier avec des étiquettes ARIA appropriées et une gestion du focus, pour les simulations complexes fournissez des instructions et des annonces de changements d'état, et testez avec des lecteurs d'écran pour vérifier que l'expérience correspond à la fonctionnalité visuelle
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Images Images

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[5]/ul[1]/li[5]/a[1]/svg[1]

Code Snippet
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img"><path d="M19.7,3H4.3C3.582,3,3,3.582,3,4.3v15.4C3,20.41

SVG element with role="img" detected that requires manual review to verify appropriate text alternatives are provided Élément SVG avec role="img" détecté nécessitant une révision manuelle pour vérifier que des textes alternatifs appropriés sont fournis
About this issue:
What the issue is:

SVG element with role="img" detected that requires manual review to verify appropriate text alternatives are provided

Élément SVG avec role="img" détecté nécessitant une révision manuelle pour vérifier que des textes alternatifs appropriés sont fournis

Why this is important:

SVG elements with role="img" are explicitly marked as images and treated as a single graphic by assistive technologies, requiring appropriate text alternatives. While the role="img" indicates developer awareness of accessibility needs, manual review is needed to verify that any aria-label, aria-labelledby, or internal <title> elements adequately describe the image's content or function, and that the description is appropriate for the SVG's context and purpose.

Les éléments SVG avec role="img" sont explicitement marqués comme images et traités comme un graphique unique par les technologies d'assistance, nécessitant des textes alternatifs appropriés. Bien que le role="img" indique la sensibilisation du développeur aux besoins d'accessibilité, une révision manuelle est nécessaire pour vérifier que tout aria-label, aria-labelledby, ou éléments <title> internes décrivent adéquatement le contenu ou la fonction de l'image, et que la description est appropriée pour le contexte et l'objectif du SVG.

Who it affects:

Blind and low vision users using screen readers who depend on text alternatives to understand image content, users with cognitive disabilities who benefit from clear, concise descriptions of visual information, keyboard users who may encounter the SVG in their navigation flow, and users of assistive technologies that treat role="img" SVGs as atomic image elements

Utilisateurs aveugles et malvoyants utilisant des lecteurs d'écran qui dépendent des textes alternatifs pour comprendre le contenu des images, utilisateurs avec des handicaps cognitifs qui bénéficient de descriptions claires et concises de l'information visuelle, utilisateurs de clavier qui peuvent rencontrer le SVG dans leur flux de navigation, et utilisateurs de technologies d'assistance qui traitent les SVG avec role="img" comme des éléments d'image atomiques

How to remediate:
Verify the SVG with role="img" has appropriate accessible names through aria-label or aria-labelledby attributes, ensure any <title> or <desc> elements inside the SVG are properly referenced if used for labeling, confirm decorative SVGs are hidden with aria-hidden="true" rather than given role="img", check that the text alternative accurately describes the SVG's meaning in context, and test with screen readers to ensure the image is announced with meaningful information
Vérifiez que le SVG avec role="img" a des noms accessibles appropriés via les attributs aria-label ou aria-labelledby, assurez-vous que tous les éléments <title> ou <desc> à l'intérieur du SVG sont correctement référencés s'ils sont utilisés pour l'étiquetage, confirmez que les SVG décoratifs sont cachés avec aria-hidden="true" plutôt que d'avoir role="img", vérifiez que le texte alternatif décrit précisément la signification du SVG dans le contexte, et testez avec des lecteurs d'écran pour vous assurer que l'image est annoncée avec des informations significatives
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 1 1
  • . .
  • 1 1

Touchpoint Images Images

Impact Low Faible

Location /html[1]/body[1]/footer[1]/div[2]/div[1]/div[1]/div[1]/div[1]/figure[1]/img[1]

Code Snippet
<img loading="lazy" decoding="async" width="100" height="100" src="https://cnib-accesslabs.ca/wp-content/uploads//CNIB-Footer.svg" alt="CNIB" class="wp-image-39" style="width:300px;height:109px">
Landmarks Points de repère

A contentinfo landmark (<footer> at top level or role="contentinfo") has been detected on this page. %(footerLabel_description)s Signature %(footerSignature)s allows tracking this same footer across different pages. Une région repère contentinfo (<footer> au niveau supérieur ou role="contentinfo") a été détectée sur cette page. %(footerLabel_description)s La signature %(footerSignature)s permet de suivre ce même pied de page sur différentes pages.
About this issue:
What the issue is:

A contentinfo landmark (<footer> at top level or role="contentinfo") has been detected on this page. %(footerLabel_description)s Signature %(footerSignature)s allows tracking this same footer across different pages.

Une région repère contentinfo (<footer> au niveau supérieur ou role="contentinfo") a été détectée sur cette page. %(footerLabel_description)s La signature %(footerSignature)s permet de suivre ce même pied de page sur différentes pages.

Why this is important:

Contentinfo landmarks identify site-wide footer information such as copyright, privacy policy, and contact links. There should be only one contentinfo per page. It must contain site-level information rather than page-specific footers, and should not be nested inside other landmarks. The signature allows auditors to recognize when the same footer appears on multiple pages.

Les régions repères contentinfo identifient les informations de pied de page à l'échelle du site telles que les droits d'auteur, la politique de confidentialité et les liens de contact. Il ne devrait y avoir qu'un seul contentinfo par page. Il doit contenir des informations au niveau du site plutôt que des pieds de page spécifiques à la page, et ne devrait pas être imbriqué dans d'autres régions repères. La signature permet aux auditeurs de reconnaître quand le même pied de page apparaît sur plusieurs pages.

Who it affects:

Screen reader users who navigate by landmarks to quickly access site-wide footer information and legal links, keyboard users who use landmarks for efficient page navigation, users with cognitive disabilities who rely on consistent footer placement for finding important site information

Utilisateurs de lecteurs d'écran qui naviguent par régions repères pour accéder rapidement aux informations de pied de page à l'échelle du site et aux liens légaux, utilisateurs de clavier qui utilisent les régions repères pour une navigation efficace de la page, utilisateurs avec des déficiences cognitives qui s'appuient sur un placement cohérent du pied de page pour trouver des informations importantes du site

How to remediate:
Verify there is only one contentinfo landmark per page. Ensure the footer contains site-level information (copyright, privacy, contact) rather than article-specific or section-specific footers. If multiple footers exist, ensure only the site-level one is contentinfo. Test with screen reader to confirm contentinfo is announced correctly.
Vérifiez qu'il n'y a qu'une seule région repère contentinfo par page. Assurez-vous que le pied de page contient des informations au niveau du site (droits d'auteur, confidentialité, contact) plutôt que des pieds de page spécifiques aux articles ou aux sections. Si plusieurs pieds de page existent, assurez-vous que seul celui au niveau du site est contentinfo. Testez avec un lecteur d'écran pour confirmer que contentinfo est annoncé correctement.
Relevant test criteria:
WCAG Success Criteria:
  • 2 2
  • . .
  • 4 4
  • . .
  • 1 1
  • , ,
  • 4 4
  • . .
  • 1 1
  • . .
  • 2 2

Touchpoint Landmarks Points de repère

Impact Low Faible

Location /html[1]/body[1]/footer[1]

Code Snippet
<footer role="contentinfo" aria-label="Footer">
        
                            <div class="footer-area-top entry-container">
                        <div class="container">
                            <div class="footer-area-widget">
<h2 class="wp-block-heading has-h-3-font-size" id="subscribe-to-our-newsletter"><strong>Subscribe to our newsletter</strong></h2>
</div><div class="footer-area-widget">
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
</div><div class
Page Page

Page defines %(breakpointCount)s responsive breakpoint%(breakpointCount_plural)s in CSS media queries: %(breakpoints)s. Breakpoints range from %(minBreakpoint)spx to %(maxBreakpoint)spx. La page définit %(breakpointCount)s point%(breakpointCount_plural)s de rupture responsive dans les requêtes média CSS : %(breakpoints)s. Les points de rupture s'étendent de %(minBreakpoint)spx à %(maxBreakpoint)spx.
About this issue:
What the issue is:

Page defines %(breakpointCount)s responsive breakpoint%(breakpointCount_plural)s in CSS media queries: %(breakpoints)s. Breakpoints range from %(minBreakpoint)spx to %(maxBreakpoint)spx.

La page définit %(breakpointCount)s point%(breakpointCount_plural)s de rupture responsive dans les requêtes média CSS : %(breakpoints)s. Les points de rupture s'étendent de %(minBreakpoint)spx à %(maxBreakpoint)spx.

Why this is important:

Responsive breakpoints indicate that the page layout changes at different viewport widths. This is important for accessibility testing because interactive elements, navigation menus, and content visibility may change at different breakpoints. Some accessibility issues (such as content obscuring, focus order, or touch target sizes) may only appear at specific viewport widths. Testing at multiple breakpoints ensures that keyboard navigation, screen reader landmarks, and interactive controls work correctly across all responsive layouts. Mobile-specific layouts often have collapsible menus, different navigation patterns, or alternative content presentation that requires separate accessibility verification.

Les points de rupture responsive indiquent que la mise en page change selon différentes largeurs de fenêtre d'affichage. Ceci est important pour les tests d'accessibilité car les éléments interactifs, menus de navigation et visibilité du contenu peuvent changer à différents points de rupture. Certains problèmes d'accessibilité (comme l'occultation de contenu, l'ordre de focus ou les tailles de cibles tactiles) peuvent n'apparaître qu'à des largeurs de fenêtre spécifiques. Tester à plusieurs points de rupture garantit que la navigation au clavier, les régions repères de lecteurs d'écran et les contrôles interactifs fonctionnent correctement sur toutes les mises en page responsive. Les mises en page spécifiques aux mobiles ont souvent des menus repliables, des modèles de navigation différents ou une présentation de contenu alternative qui nécessite une vérification d'accessibilité séparée.

Who it affects:

Mobile device users who view pages at small viewport widths, tablet users at medium breakpoints, users who zoom content which changes the effective viewport, users with screen readers who need consistent landmark navigation across breakpoints, keyboard users who need predictable focus order at all viewport sizes, and touch device users who need adequate target sizes in mobile layouts

Utilisateurs d'appareils mobiles qui consultent les pages avec de petites fenêtres d'affichage, utilisateurs de tablettes aux points de rupture moyens, utilisateurs qui zooment le contenu ce qui modifie la fenêtre d'affichage effective, utilisateurs de lecteurs d'écran qui ont besoin d'une navigation cohérente des régions repères entre les points de rupture, utilisateurs de clavier qui ont besoin d'un ordre de focus prévisible à toutes les tailles de fenêtre d'affichage, et utilisateurs d'appareils tactiles qui ont besoin de tailles de cibles adéquates dans les mises en page mobiles

How to remediate:
Test accessibility at each defined breakpoint. Verify that keyboard navigation order remains logical, all interactive elements remain accessible, focus indicators are visible, landmark regions are properly labeled, touch targets meet minimum size requirements (44x44px), and content that appears/disappears at different breakpoints doesn't create keyboard traps or break screen reader navigation. Use browser developer tools or page.setViewport() to test at: %(breakpoints)spx. Pay special attention to navigation menus that collapse into hamburger menus, content that reflows vertically, and any interactive elements that change position or visibility.
Testez l'accessibilité à chaque point de rupture défini. Vérifiez que l'ordre de navigation au clavier reste logique, tous les éléments interactifs restent accessibles, les indicateurs de focus sont visibles, les régions repères sont correctement étiquetées, les cibles tactiles respectent les exigences de taille minimale (44x44px), et le contenu qui apparaît/disparaît à différents points de rupture ne crée pas de pièges clavier ou ne brise pas la navigation des lecteurs d'écran. Utilisez les outils de développement du navigateur ou page.setViewport() pour tester à : %(breakpoints)spx. Portez une attention particulière aux menus de navigation qui se replient en menus hamburger, au contenu qui se réorganise verticalement, et à tout élément interactif qui change de position ou de visibilité.
Relevant test criteria:
WCAG Success Criteria:
  • 1 1
  • . .
  • 4 4
  • . .
  • 1 1
  • 0 0
  • , ,
  • 2 2
  • . .
  • 4 4
  • . .
  • 3 3

Touchpoint Page Page

Impact Low Faible

Location /html